React 條件渲染
在 React 中，你可以條件性地渲染元件。
有幾種方法可以做到這一點。
if 語句
我們可以使用 JavaScript 的 if 運算子來決定渲染哪個元件。
示例
我們將使用這兩個元件
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 元件的方法是使用 && 運算子。
示例
我們可以使用花括號將 JavaScript 表示式嵌入 JSX 中
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 > 0 為真，則會渲染 && 後面的表示式。
嘗試清空 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} />);
欲瞭解更多資訊，請參閱 三元運算子 部分。
