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 许可协议。转载请注明出处!
 评论