06-JSX条件渲染案例

85 阅读1分钟

案例:默认显示文案,点击按钮隐藏,再点击显示

image.png 思路:定义控制展示与否的state.show.点击按钮修改show.JSX内容依赖show展示。

现在讨论JSX依赖show展示的几种方式:

方式一: render中定义临时变量eles作为JSX html内容展示,show=true,eles赋值,render中显示{eles} 方式二: 三元运算或逻辑与。当show && <h2>{message}</h2> 前两种方式,属于纯条件渲染,元素会被移除加载,重排导致DOM渲染压力大,采用style属性控制的方式。 方式三:

image.png

总结: react非常灵活,条件渲染走的是js普通逻辑