React碰到v-if的示例分析
这篇文章将为大家详细讲解有关React碰到v-if的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供成都网站制作、网站建设、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业大通免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
代码:
import React from 'react' const App = () => { const record = { toKe: true, // 贝壳首页 toSecondHand: true, // 二手房 toFang: true, // 新房 } return ( ) } export default App
如上述代码,我们在项目中会遇到很多这样的写法, 细看一下没什么问题,可是当在重构老项目的时候,你会发现这个代码结构是多么痛苦,特别是如下的结构。
{ record.toFang && record.toKe && record.toSecondHand && }
虽然代码逻辑没问题,但人生就是这样,有时候出场顺序真的很重要。突然就想起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 ( ) } 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 ({ content }) } }
如此简单,但笔者审查元素的时候发现,每个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 && 贝壳首页 二手房 新房 }a href="https://bj.ke.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贝壳首页 二手房 新房
其实感觉也没多大用处hhhh
关于“React碰到v-if的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网页标题:React碰到v-if的示例分析
本文路径:http://myzitong.com/article/gciees.html