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