JSX return里面如何用if判断

在JSX中，由于不能直接使用传统的JavaScript ​​if​​ 语句，但可以通过条件渲染来实现类似的效果。以下是一些方法：

1. 三元运算符（Ternary Operator）

最简单的条件渲染方式是使用三元运算符：

return (<div>{condition ? <ComponentIfTrue /> : <ComponentIfFalse />}</div>
);

例如：

const isLoggedIn = true; // 条件变量return (<nav>{isLoggedIn ? (<Link to="/dashboard">Dashboard</Link>) : (<button onClick={handleLogin}>登录</button>)}</nav>
);

2. && 运算符

可以利用JavaScript的逻辑与（&&）运算符进行条件渲染，当且仅当前面的表达式为真时才渲染后面的元素：

return (<div>{isLoggedIn && <WelcomeMessage />}</div>
);

3. 使用数组的 ​​.map()​​ 方法结合条件

在循环内部使用条件判断：

const items = [...]; // 数据数组return