React 条件付きレンダリング | プログラミングチュートリアル

はじめに

React のドキュメントへようこそ！この実験では、条件付きレンダリングの紹介を行います。

React では、if 文、&&、および ? : 演算子などの JavaScript 構文を使用して、条件付きで JSX をレンダリングできます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 98%です。学習者から 100% の好評価を得ています。

条件付きレンダリング

VM 内には既に React プロジェクトが用意されています。一般的には、App.js にコードを追加するだけです。

依存関係をインストールするには、次のコマンドを使用してください。

npm i

React では、条件を記述するための特別な構文はありません。代わりに、通常の JavaScript コードを書くときと同じ技法を使用します。たとえば、if 文を使って条件付きで JSX を含めることができます。

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

もっとコンパクトなコードが好きな場合は、条件付き ? 演算子を使うことができます。if とは異なり、これは JSX の中で機能します。

return <li className="item">{isPacked ? name + " ✔" : name}</li>;

else ブランチが必要ない場合、より短い論理演算子 && 構文を使うこともできます。

return <li className="item">{isPacked && name + " ✔"}</li>;

isPacked プロップが true の場合、このコードは異なる JSX ツリーを返します。この変更により、一部の項目の末尾にチェックマークが付きます。

// App.js
function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

プロジェクトを実行するには、次のコマンドを使用してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

npm start

まとめ

おめでとうございます！あなたは条件付きレンダリングの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

React における条件付きレンダリング

はじめに

条件付きレンダリング

まとめ