一点点记录,建议需要学习React的移步官方文档去学习。
在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西。然后,你只需要使用你应用中的state来渲染它们。
React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多。好像就是使用JavaScript中的if
或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改。
下面这个例子就是根据不同的isLoggedIn
进行不同的欢迎。
元素变量(element variables)
|
|
如果你觉得上述的代码非常的冗长,React有更短的哦
1.inline if with logical && Operator(这个地方我不会翻译)
这个的意思就是使用了 true && 表达式
,如果是false &&
的话就相当于false。
因此当表达式是true
的时候,这个紧跟&&
的元素就会在输出结果中显示,否则React就忽视并跳过它。
2.这种方式就是使用JavaScript中的三元运算符condition? true : false
,下面的例子中我们使用这个来进行条件性地渲染一小块的文本。
当然你也可以这么复杂地写:
这一切都是取决于你和你的码友觉得哪种方式更加易读吧,但是当判断表达式非常多的时候,请注意学会拆分组件!!!
不让组件渲染
当你在某些情况下不想让组件渲染的时候,请使用return null
这样就可以隐藏它啦
当从组件的render()
中返回null
的时候,是不会影响组件的生命循环方法的。这就意味着componentDidMount
和componentWillUnmount
方法仍然是会被调用的哦。