基于 props 显示 JSX/HTML

Question

这种表达方式叫什么，应该如何或何时使用？

{props.type === "big" && <h2>{props.title}</h2>}

Answer 1

{} 部分是一个JSX 表达式，它允许您在 JSX 标记中嵌入 JavaScript 代码。

&& 是一个逻辑 AND 运算符，但在 JavaScript 中，true 或 false 不会导致结果，&& 这样做：

1. 计算其左侧操作数
2. 如果第 1 步的值是 falsy，&& 操作会将该结果作为结果并在此处停止
3. 如果第 1 步的值是 truthy（与 falsy 相反），&& 运算会计算右侧操作数并将该值作为结果

所以props.type === "big" && <h2>{props.title}</h2> 的意思是：

• 如果props.type 是"big"，请将<h2>{props.title}</h2> 放在这里。
• 如果没有，请不要在此处添加任何内容（因为 React 不会呈现 false、null 或 undefined）

应该如何或何时使用它

当您需要有条件地渲染某些东西时，通常会使用它。条件是第一部分 (props.type === "big")。被渲染或未被渲染的东西是第二部分（<h2>{props.title}</h2>）。