React 条件渲染
在 React 中，您可以有条件地渲染组件。
有几种方法可以做到这一点。
if 语句
我们可以使用 if JavaScript 操作符来决定渲染哪个组件。
实例:
我们将使用这两个组件：
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
实例:
现在，我们将创建另一个组件，根据条件选择要渲染的组件：
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
尝试将 isGoal 属性更改为 true：
实例:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={true} />);
逻辑&&运算符
另一种有条件地渲染 React 组件的方法是使用 && 运算符。
实例:
我们可以使用花括号在 JSX 中嵌入 JavaScript 表达式：
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
如果 cars.length 等于 true，则将呈现 && 之后的表达式。
尝试清空 cars 数组：
实例:
const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);三元运算符
另一种有条件地渲染元素的方法是使用三元运算符。
condition ? true : false
我们将回到目标示例。
实例:
如果isGoal是true，则返回MadeGoal组件，否则返回MissedGoal组件：
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
要了解更多信息，请参阅三元运算符部分。
