react 渲染相关问题

1 三元运算符

1 const MyComponent = ({ name }) => (
2 
3  <div className="hello">
4 
5    {name ? `Hello ${name}` : 'Please sign in'}
6 
7  </div>
8 
9 );

有几点需要注意。因为我们使用了箭头函数的单语句形式，所以隐含了return 语句。另外，使用三元运算符允许我们省略掉重复的 <div className="hello"> 标记。

2 &&运算符

当什么都不应该渲染时，会渲染一个0。

所以，当对非布尔值使用 && 时，我们必须让这个假值返回 React 无法渲染的东西，比如说，false 这个值。

1 {!!stars && (
2 
3  <div>
4 
5    {'☆'.repeat(stars)}
6 
7  </div>
8 
9 )}

注意 stars 前的双感叹操作符（!!）

第一个感叹操作符会强迫 stars 的值变成布尔值并且进行一次“非”操作。如果 stars 是 0 ，那么 !stars 会是 true。

然后我们执行第二个非操作，所以如果 stars 是 0，!!stars 会是 false。正好是我们想要的。

如果你不喜欢 !!，那么你也可以强制转换出一个布尔数比如这样

{Boolean(stars) && (

或者只是用比较符产生一个布尔值（有些人会说这样甚至更加语义化）。

{stars > 0 && (

————————————————
版权声明：本文为CSDN博主「技术无边」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/f8qg7f9yd02pe/java/article/details/82975821