浅谈React碰到v-if
最近在重构公司⽼项⽬，由于本⼈以前的技术栈是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>
{
<a style={{padding: 20}} href="bj.ke" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳⾸页</a>
: null
}
{
<a style={{padding: 20}} href="bj.ke/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >⼆⼿房</a>      : null
}
{
<a style={{padding: 20}} href="bj.fang.ke/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>      : null
}
</li>
</ul>
</div>
)
}
export default App
如上述代码，我们在项⽬中会遇到很多这样的写法, 细看⼀下没什么问题，可是当在重构⽼项⽬的时候，你会发现这个代码结构是多么痛苦，特别是如下的结构。
{
&& <div>
<a style={{padding: 20}} href="bj.ke" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳⾸页</a>
<a style={{padding: 20}} href="bj.ke/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >⼆⼿房</a>
<a style={{padding: 20}} href="bj.fang.ke/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>
</div>
}
虽然代码逻辑没问题，但⼈⽣就是这样，有时候出场顺序真的很重要。突然就想起vue的v-if了。
没错，回归主题，就是：react中模拟的
先上代码
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={Ke} tag='span'>
<a href="bj.ke" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳⾸页</a>
</Hidden>
<Hidden visible={SecondHand} tag='span' style={{padding: 20}}>
<a href="bj.ke/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >⼆⼿房</a>
</Hidden>
<Hidden visible={Fang} tag='p'>
<a href="bj.fang.ke/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</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>
reactnative开发
)
}
}
如此简单，但笔者审查元素的时候发现，每个Hidden下的children莫名被嵌套了⼀层div
如下
原来的横着排列的元素，⼀下⼦竖着排列了。这可不太好，本来给我套个div，我都可以勉强接收，现在连我布局都给我变了。
怎么办？笔者突然想到使⽤中的时，标签是可以通过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 (
)
// return (
// 尝试⽤这种⽅法去实现，发现不符合react的规则，所以使⽤最原始的渲染⽅法
// ateElement
/
/ `<`${tag}`>` + { content } + `</`${tag}`>`
// )
}
}
问题：笔者的初衷是模拟vue的v-if, 所以对传⼊的children并没做太多处理，不建议做多做封装。有兴趣的同学可以⾃⼰玩。
{
&& <span>
<a style={{padding: 20}} href="bj.ke" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳⾸页</a>
<a style={{padding: 20}} href="bj.ke/ershoufang/" rel="external nofollow" rel="external nof
ollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >⼆⼿房</a>    <a style={{padding: 20}} href="bj.fang.ke/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>  </span>
}
<Hidden
visible={Fang && Ke && SecondHand}
tag='span'>
a href="bj.ke" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳⾸页</a>
<a style={{padding: 20}} href="bj.ke/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >⼆⼿房</a>  <a style={{padding: 20}} href="bj.fang.ke/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a> </Hidden>
其实感觉也没多⼤⽤处hhhh
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。