Ï

React学习笔记——条件渲染(v15.5)

    React条件渲染和JavaScript的条件工作方式是一样的。

    1、使用JavaScript中if或者条件运算符来创建一个代表当前状态的元素,然后让React来更新匹配的UI。

    2、元素变量

    可以使用变量保存元素,这可有条件的渲染组件的一部分,输出的其余部分保持不变。

    3、内联if使用逻辑‘&&’操作符

    声明一个变量并且使用if语句有条件的渲染组件是一个很好的方法,然而,有时候你想使用一些简短的语法,就需要用到JSX内联表达式。

    JSX可以在‘{}’内嵌套任何表达式,这其中就包括JavaScript逻辑&&操作符,这对于有条件的引入一个元素是很方便的。

    它之所以起作用是因为true && 表达式 总是得到一个表达式,而false && 表达式 总是计算为false。因此,如果条件是true,&&后面元素将会被输出,相反如果条件是false,React将会忽略并且跳过它。

    4、内联if-else条件运算符

    另一种内联方式条件渲染元素是使用JavaScript条件运算符:condition ? true : false

    就像JavaScript一样,根据你和团队的考虑,可以选择一种适合风格。但要记住,当一个组件的的条件判断过于复杂时,应该考虑拆分组件了。

    5、阻止组件渲染

    极少的情况下,你可能一个组件隐藏它自己,即使它被其它组件渲染。想隐藏组件可以把它的返回值设为null。

    组件的render方法返回null,不能影响到组件生命周期方法。例如:componentWillUpdate 和 componentDidUpdate方法仍然后执行。

    转载请注明:风尘 » React学习笔记——条件渲染(v15.5)

    喜欢 0
标签: , , , , ,

还没有人抢沙发呢~