浅谈React碰到v-if


Posted in Javascript onNovember 04, 2018

最近在重构公司老项目,由于本人以前的技术栈是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

如下

浅谈React碰到v-if

原来的横着排列的元素,一下子竖着排列了。这可不太好,本来给我套个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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
小程序实现五星点评效果
Nov 03 #Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
常用jQuery代码分享
2015/07/14 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Python3使用requests发闪存的方法
2016/05/11 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
深入分析python 排序
2020/08/24 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
先进基层党组织材料
2014/12/25 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫