React的条件渲染
元素变量
在组件的render()
中引入一个元素变量。通过if-else
条件语句判断表达式真假,将关于条件渲染的语句相关语速储存在这个条件变量中。
在最后的return()
语句中只需要输出这个元素变量即可。
内联渲染
适用于简单条件,对于过于复杂的条件应当选择提取组件。
与运算符 &&
{条件判断语句 && 条件渲染语句}
如果条件判断语句为true
,则总返回右侧条件渲染语句;否则,直接忽略右侧语句总返回false
。
三目运算符
condition ? true : false
阻止组件渲染
组件直接返回null
,对于函数组件,直接if
判断后return null
;对于class组件,在render()
中return null
。
- 本文标题:React的条件渲染
- 本文作者:徐徐
- 创建时间:2020-10-05 18:23:56
- 本文链接:https://machacroissant.github.io/2020/10/05/react-components/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论