Reactでの条件付きレンダリング

Reactで何かと他の何かを動的に出力する方法

ReactコンポーネントJSXでは、条件に基づいて、コンポーネントを出力するか、別のコンポーネントを出力するか、JSXの一部だけを出力するかを動的に決定できます。

最も一般的な方法は、おそらく三項演算子です。

const Pet = (props) => {
  return (
    {props.isDog ? <Dog /> : <Cat />}
  )
}

別の方法は、概念的にifしかし、elseを使用することです&&このように機能する演算子：前の式がtrueと評価された場合、その後の式を出力します。

const Pet = (props) => {
  return (
    {props.isDog && <Dog />}
    {props.isCat && <Cat />}
  )
}

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル：


Tech Wiki Online！