React 条件付きレンダリング
Reactでは、コンポーネントを条件付きでレンダリングできます。
これを使用するにはいくつかの方法があります。
ifステートメント
JavaScriptのif演算子を使用して、どのコンポーネントをレンダリングするかを決めることができます。
例：
次の2つのコンポーネントを使用します。
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コンポーネントを条件付きでレンダリングするもう1つの方法は、&&演算子を使用することです。
例：
中括弧を使用して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が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} />);
詳細については、三項演算子セクションを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。