条件付きレンダリングに反応する
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/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
isGoal
属性を次のように変更してみてくださいtrue
:
例:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
論理&&
演算子
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'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
cars.length
がtrueに等しい場合、後の式&&
がレンダリングされます。
cars
配列を空にしてみてください:
例:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
三項演算子
要素を条件付きでレンダリングする別の方法は、三項演算子を使用することです。
condition ? true : false
目標の例に戻ります。
例:
MadeGoal
の場合
isGoal
はコンポーネントを返しtrue
、そうでない場合はコンポーネントを返しMissedGoal
ます。
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
詳細については、三項演算子のセクションを参照してください。