最近在重构公司老项目,由于本人以前的技术栈是vue, 换工作后发现现在公司的技术栈是react, 所以重构的过程是及其痛苦。加之项目又是几年前的老项目,不敢大改,比葫芦画瓢比比皆是。本文就介绍下遇到的一个常用的痛点。欢迎大佬指正。

废话不多说,直接上一段代码。

import React from 'react'

const App = () => {
const record = {
toKe: true, // 贝壳首页
toSecondHand: true, // 二手房
toFang: true, // 新房
}
return (
<div style={{width: 600, margin: '50px auto'}}>
<ul>
<li>
<h3>react常规写法</h3>
{
record.toKe
? <a style={{padding: 20}} href="https://bj.ke.com">贝壳首页</a>
: null
}
{
record.toSecondHand
? <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/">二手房</a>
: null
}
{
record.toFang
? <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/">新房</a>
: null
}
</li>
</ul>
</div>
)
}
export default App

如上述代码,我们在项目中会遇到很多这样的写法, 细看一下没什么问题,可是当在重构老项目的时候,你会发现这个代码结构是多么痛苦,特别是如下的结构。

{
record.toFang && record.toKe && record.toSecondHand
&& <div>
<a style={{padding: 20}} href="https://bj.ke.com">贝壳首页</a>
<a style={{padding: 20}} href="https://bj.ke.com/ershoufang/">二手房</a>
<a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/">新房</a>
</div>
}

虽然代码逻辑没问题,但人生就是这样,有时候出场顺序真的很重要。突然就想起vue的v-if了。
没错,回归主题,就是:react中模拟vuev-if

先上代码

import React from 'react'
import Hidden from './Hidden'
const App = () => {
const record = {
toKe: true, // 贝壳首页
toSecondHand: true, // 二手房
toFang: true, // 新房
}
return (
<div style={{width: 600, margin: '50px auto'}}>
<ul>
<li>
<h3>react模拟实现vue中v-if指令</h3>
<Hidden visible={record.toKe} tag='span'>
<a href="https://bj.ke.com">贝壳首页</a>
</Hidden>
<Hidden visible={record.toSecondHand} tag='span' style={{padding: 20}}>
<a href="https://bj.ke.com/ershoufang/">二手房</a>
</Hidden>
<Hidden visible={record.toFang} tag='p'>
<a href="https://bj.fang.ke.com/loupan/">新房</a>
</Hidden>
</li>
</ul>
</div>
)
}
export default App

简单就是封装Hidden组件,通过visible去控制是否渲染。

相信聪明的你一定知道怎么去封装Hidden

笔者刚开始是这么写的

import React, { Component } from 'react'

export default class Hidden extends Component {
render() {
const { visible, children } = this.props
const content = visible ? children : null
return (
<div>
{ content }
</div>
)
}
}

如此简单,但笔者审查元素的时候发现,每个Hidden下的children莫名被嵌套了一层div
如下

原来的横着排列的元素,一下子竖着排列了。这可不太好,本来给我套个div,我都可以勉强接收,现在连我布局都给我变了。
怎么办?笔者突然想到使用vue-router中的router-link时,标签是可以通过tag去替换默认标签的。
那我们再给它个tag呗,连带自定义属性。

import React, { Component } from 'react'

export default class Hidden extends Component {
render() {
const { visible, children, tag = 'div', ...rest } = this.props
const content = visible ? children : null
return (
React.createElement(tag, rest, content)
)
// return (
// 尝试用这种方法去实现,发现不符合react的规则,所以使用最原始的渲染方法
// React.createElement
// `<`${tag}`>` + { content } + `</`${tag}`>`
// )
}
}

问题:笔者的初衷是模拟vue的v-if, 所以对传入的children并没做太多处理,不建议做多做封装。有兴趣的同学可以自己玩。

{
record.toFang && record.toKe && record.toSecondHand
&& <span>
<a style={{padding: 20}} href="https://bj.ke.com">贝壳首页</a>
<a style={{padding: 20}} href="https://bj.ke.com/ershoufang/">二手房</a>
<a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/">新房</a>
</span>
}
<Hidden
visible={record.toFang && record.toKe && record.toSecondHand}
tag='span'>
a href="https://bj.ke.com">贝壳首页</a>
<a style={{padding: 20}} href="https://bj.ke.com/ershoufang/">二手房</a>
<a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/">新房</a>
</Hidden>

其实感觉也没多大用处hhhh

好了,讲解完毕。

原文地址:https://segmentfault.com/a/1190000016897137

React碰到v-if的更多相关文章

  1. Vue于React特性对比(二)

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  2. 2017 年比较 Angular、React、Vue 三剑客(转载)

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...

  3. [译] 2017 年比较 Angular、React、Vue 三剑客

    原文地址:Angular vs. React vs. Vue: A 2017 comparison 原文作者:Jens Neuhaus 译文出自:掘金翻译计划 本文永久链接:github.com/xi ...

  4. 关于React Native常用技巧

    Doctor命令检查所需环境 @2019年11月18日,React Native v新增了一个环境检查和诊断命令行,可以帮助新手修复环境,输出环境依赖报告. 先建好的一个React Native项目, ...

  5. [转] npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

  6. npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

  7. Ant Table组件

    http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件   v一.Ant Design of React http:/ ...

  8. Node.js环境搭建&&npm安装

    Node.js环境搭建 什么使Node.js呢?我们知道JavaScript开始作为客户端语言,但早已在浏览器端一统江湖,这时,野心越来越大,它就想向服务器端拓展了,于是Node.js就是这样的,我们 ...

  9. npm模块安装机制

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一.正因为有了npm,我们只要一行命令:npm install,就能安装别人写好的模块 . 一.从 npm ins ...

随机推荐

  1. 63. 不同路径 II

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在考虑网 ...

  2. css实现发光的input输入框

    效果图截图: 案例代码示下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 深度学习环境搭建(Ubuntu16.04+GTX1080Ti+CUDA8.0+Cudnn6.0+TensorFlow+Caffe2(Pytorch))

    OS System:Ubuntu16.04 GPU Device:GTX1080Ti Softwares:CUDA8.0.Cudnn6.0.TensorFlow(1.4.0).Caffe2(1.0.0 ...

  4. python之yagmail发送邮件

    yagmail发送邮件 import yagmail yag = yagmail.SMTP(user="xxxxxxxxxx@163.com",password="xxx ...

  5. 洛谷 P3830 [SHOI2012]随机树

    https://www.luogu.org/problemnew/show/P3830 具体方法见代码.. 其实挺神奇的,概率可以先算出“前缀和”(A小于等于xxx的概率),然后再“差分”得到A恰好为 ...

  6. git reflog查看所有操作记录

    git reflog 可以查看所有分支的所有操作记录(包括(包括commit和reset的操作),包括已经被删除的commit记录,git log则不能察看已经删除了的commit记录 具体一个例子, ...

  7. Super Mario(线段树离线区间k值)

    以前见过这题,没做出来,知道是离线处理,这次仔细想了下, 首先把出现的高度都map离散化一下,以离散化出来的数目g建树,把每个位置都开俩个vector,一个存以这个位置为L的询问,一个存以这个位置为R ...

  8. npm scripts 常用规范总结

    npm scripts 常用规范总结 随着 npm scripts 使用越来越多,需要规范一下, npm run 的使用词. 定义 我定义如下形式: npm run <action>:&l ...

  9. div 绝对定位

    div绝对居下 .Phone2title{ width:%; height:30px; line-height:30px; /*text-align:left;*/ /*background-colo ...

  10. iOS 通知、本地通知和推送通知有什么区别? APNS机制。

    本地/推送通知为不同的需要而设计.本地通知对于iPhone,iPad或iPod来说是本地的.而推送通知——来自于设备外部.它们来自远程服务器——也叫做远程通知——推送给设备上的应用程序(使用APNs) ...