浅谈反应碰到控制显示

最近在重构公司老项目，由于本人以前的技术栈是vue，换工作后发现现在公司的技术栈是做出反应，所以重构的过程是及其痛苦。加之项目又是几年前的老项目，不敢大改，比葫芦画瓢比比皆是。本文就介绍下遇到的一个常用的痛点。欢迎大佬指正。

废话不多说，直接上一段代码。

从“React”const App=()={ const record={ toke : true，//贝壳首页toSecondHand: true，//二手房toFang: true，//新房} return(div style={ { width : 600，margin 3360 ' 50px auto ' } } ul Li H3反应过来常规写法/h3 { record.toKe？a style={ { padd : 20 } } href=' https://bj。柯。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '贝壳首页/a : null {记录。二手的？a style={ { padd : 20 } } href=' https://bj。柯。com/ershoufang/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '二手房/a : null } { record.toFang？a style={ { padd : 20 } } href=' https://bj。方。柯。com/Lou pan/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新房/a : null }/Li/ul/div)导出默认应用如上述代码，我们在项目中会遇到很多这样的写法，细看一下没什么问题，可是当在重构老项目的时候，你会发现这个代码结构是多么痛苦，特别是如下的结构。

{记录。托方唱片。托克唱片。转到二手div a style={ { padd : 20 } } href=' https://bj。柯。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '贝壳首页/a a style={ { padd : 20 } } href=' https://bj。柯。com/ershoufang/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '二手房/a a style={ { padd : 20 } } href=' https://bj。方。柯。com/Lou pan/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新房/a /div}虽然代码逻辑没问题，但人生就是这样，有时候出场顺序真的很重要。突然就想起某视频剪辑软件的控制显示了。没错，回归主题，就是：反应中模拟某视频剪辑软件的控制显示

先上代码

从"反应"导入反应"从隐藏导入"。/Hidden ' const App=()={ const record={ toke : true，//贝壳首页toSecondHand: true，//二手房toFang: true，//新房} return(div style={ { width : 600，margin 3360 ' 50px auto ' } } ul Li H3反应过来模拟实现某视频剪辑软件中控制显示指令/h3隐藏可见={record.toKe}标记=https://bj。柯。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '贝壳首页/a/隐藏隐藏可见={记录。二手的标记=' span ' style={ { padd : 20 } } a href=' https://bj。柯。com/ershoufang/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '二手房/a/隐藏隐藏可见={记录。tofang }标记=' p ' a href=' https://bj。方。柯。com/Lou pan/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新房a/隐藏/Li/ul/div)导出默认应用程序简单就是封装隐藏的组件，通过看得见的去控制是否渲染。

相信聪明的你一定知道怎么去封装隐藏的

笔者刚开始是这么写的

导入反应，{组件}从反应导出默认类隐藏的扩展组件{ render(){ const {可见，子级}=this。道具常量内容=可见？子项：空返回(div { content } /div ) }}如此简单，但笔者审查元素的时候发现，每个隐藏的下的孩子们莫名被嵌套了一层差异

如下

原来的横着排列的元素，一下子竖着排列了。这可不太好，本来给我套个div，我都可以勉强接收，现在连我布局都给我变了。怎么办？笔者突然想到使用某视频剪辑软件路由器中的路由器链路时，标签是可以通过标签去替换默认标签的。

那我们再给它个标签呗，连带自定义属性。

从“反应”导入做出反应，{组件}导出默认类隐藏的扩展组件{ render(){ const { visible，children，tag='div '，rest }=this.props常量内容=可见？子级： null返回React.createElement(标记、休息，内容))//返回(//尝试用这种方法去实现，发现不符合反应的规则，所以使用最原始的渲染方法//反应过来。createElEMENT/` $ { tag } ` { content } `/` $ { tag } `/)} }问题：笔者的初衷是模拟某视频剪辑软件的如果，所以对传入的孩子们并没做太多处理，不建议做多做封装。有兴趣的同学可以自己玩。

{记录。托方唱片。托克唱片。若要辅助span a style={ { padd : 20 } } href=' https://bj。柯。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '贝壳首页/a a style={ { padd : 20 } } href=' https://bj。柯。com/ershoufang/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '二手房/a a style={ { padd : 20 } } href=' https://bj。方。柯。com/Lou pan/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新房/a/span }隐藏可见={记录。托方唱片。托克唱片。转到第二个}标记=https://bj。柯。com ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '贝壳首页/a a style={ { padd : 20 } } href=' https://bj。柯。com/ershoufang/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '二手房/a a style={ { padd : 20 } } href=' https://bj。方。柯。com/Lou pan/' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新房a/隐藏其实感觉也没多大用处哈哈哈哈

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