浅谈React碰到v-if

2019-11-19 12:35:13

字体：大中小

来源：转载

供稿：网友

最近在重构公司老项目，由于本人以前的技术栈是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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页</a>      : null     }     {      record.toSecondHand      ? <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>      : null     }     {      record.toFang      ? <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>      : null     }    </li>   </ul>  </div> )}export default App

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

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

虽然代码逻辑没问题，但人生就是这样，有时候出场顺序真的很重要。突然就想起vue的v-if了。
没错，回归主题，就是：react中模拟vue的v-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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页</a>     </Hidden>     <Hidden visible={record.toSecondHand} tag='span' style={{padding: 20}}>      <a href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>     </Hidden>     <Hidden visible={record.toFang} tag='p'>      <a href="https://bj.fang.ke.com/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>  ) }}

如此简单，但笔者审查元素的时候发现，每个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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页</a>    <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>    <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a>  </span>}<Hidden   visible={record.toFang && record.toKe && record.toSecondHand}   tag='span'>  a href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页</a>  <a style={{padding: 20}} href="https://bj.ke.com/ershoufang/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二手房</a>  <a style={{padding: 20}} href="https://bj.fang.ke.com/loupan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新房</a></Hidden>

其实感觉也没多大用处hhhh

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue-router判断页面未登录自动跳转到登录页的方法示例

下一篇：微信小程序实现顶部下拉菜单栏