条件渲染
React.js 中的条件渲染就是使用 Javascript 的条件运算符，当且仅当满足特定条件时动态地将某些内容渲染到 ReactDOM。React 渲染中使用的两种主要条件运算符类型是：
- &&（与）运算符
- 三元运算符
1. &&（与）运算符
&& 运算符检查表达式的真实性或简单（布尔）性质，可以利用该性质来确定是否渲染给定元素。换句话说，&&运算符可用于确定渲染或不渲染某些内容。 相同的语法是：
condition && expressionToRender
例如，为了当消息数量满足特定条件时渲染出一条消息，可以这样实现：
代码语言：javascript复制notifications.length > 0 &&
<h1>You have {notifications.length} notifications!</h1>2. 三元运算符
三元运算符利用了Javascript 世界中存在的真值和假值条件。如果选项只有两个，则可以用三元运算符代替冗长的“if else”和“switch”语句。三元运算符的语法是：
condition ? expressionIfTrue : expressionIfFalse
如果条件为真，则为“?”后的第一个表达式 被处决；如果为 false，则执行“:”之后的第二个表达式。因此，简单来说，三元运算符可用于呈现给定的 2 个表达式之一。
例如，在与上述相同的情况下，根据通知的长度呈现 2 条不同消息中的任意一条：
代码语言：javascript复制 notifications.length === 0 ?
<h1>You're all caught up!</h1> :
<h1>You have {notifications.length} unread
notifications</h1>在上面的示例中，消息“您都陷入困境了！” 如果通知（存储在数组中）有 0 或没有通知，（在“？”之后）将被渲染（显示），这是使用array.length方法（在“？”之前）检查的。如果通知为 1 个或多个，则将显示第二个h1元素中的消息（在“:”之后）（以及使用相同array.method派生的通知数量）
If Else 和 Switch 语句
尽管三元运算符也可用于超过 3 个表达式，但如果选项超过 2 个，最佳实践是使用 if else 或 switch 语句，以避免复杂性。
我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
