最近在重构公司老项目,由于本人以前的技术栈是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中模拟的
先上代码
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,我都可以勉强接收,现在连我布局都给我变了。
怎么办?笔者突然想到使用中的时,标签是可以通过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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论