react 三元运算符和display:none条件渲染区别

之前遇到一个需求，是jsx文件中有个弹窗组件，每次关闭弹窗组件再次打开，组件中所有的state需要恢复默认值，然而我是通过display:none进行组件显示和隐藏的，每次都会保留之前的state

看如下代码

<div className="box">
  { this.state.testParam?<div>三元运算符三元运算符</div>:'' }
  <div className={`${this.state.testParam?'':'hide'}`}>diplay diplay diplay</div>
</div>

当设置this.state.testParam = false时查看浏览器元素节点渲染

35975A3E-7983-4e11-AA91-5B68CE7168F5.png

看上图，浏览器只渲染了设置display:none的节点

总结：当使用三元运算符进行条件渲染时，浏览器是不会渲染该元素节点的，但是设置为display:none则会渲染

所以：当关闭组件时还需要保存组件state时就用display,反之就用三元运算符

补充以下几种渲染方法

 <div className={`dialog-wrap ${this.state.showDialog?'':'hide'}`}>
       <DialogComponent ></DialogComponent>
 </div>
{this.state.showDialog?<DialogComponent ></DialogComponent>：''}
{this.state.showDialog&&<DialogComponent ></DialogComponent>}

参考：https://blog.csdn.net/hsany330/article/details/78191872