条件渲染
在 React 中,你可以通过使用 JavaScript 的 if 语句、 逻辑与运算符（&&）和**三元运算符（?:）**运算符来选择性地渲染 JSX。
如果当前只需要控制一个元素的显示与隐藏,则使用逻辑与。
如果要控制两个,则使用三元运算符。
1function Item({ name, isPacked }) {
2 if (isPacked) {
3 return <div>{name} ✅</div>;
4 }
5 return <div>{name}</div>;
6}
7
8export default function App() {
9 let flag = true;
10 let loading = true;
11 return (
12 <>
13 {/* if 语句 */}
14 <Item
15 isPacked={true}
16 name="宇航服"
17 />
18 {/* 逻辑与&& */}
19 {flag && <span>this is span</span>}
20 {/* 三元运算符 */}
21 {loading ? <span>loading...</span> : <span>this is span</span>}
22 </>
23 );
24}
