Reactリスト


Reactでは、ある種のループでリストをレンダリングします。

JavaScriptmap()配列メソッドは、一般的に推奨されるメソッドです。

メソッドの復習が必要な場合は、 ES6セクションmap()を確認してください


例:

ガレージからすべての車をレンダリングしてみましょう。

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

でこのコードを実行するcreate-react-appと機能しますが、リストアイテムに「キー」が提供されていないという警告が表示されます。


w3schools CERTIFIED . 2022

認定を受けましょう!

Reactモジュールを完了し、演習を行い、試験を受けて、w3schools認定を取得してください!!

95ドル登録

キー

キーを使用すると、Reactは要素を追跡できます。このように、アイテムが更新または削除された場合、リスト全体ではなく、そのアイテムのみが再レンダリングされます。

キーは、各兄弟に固有である必要があります。ただし、それらはグローバルに複製できます。

通常、キーは各アイテムに割り当てられた一意のIDである必要があります。最後の手段として、配列インデックスをキーとして使用できます。

例:

前の例をリファクタリングして、キーを含めましょう。

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));


エクササイズで自分をテストする

エクササイズ:

Reactがリスト内の要素を追跡できるようにする属性を追加します。

function GroceryList() {
  const items = [
    {id: 1, name: 'bread'},
    {id: 2, name: 'milk'},
    {id: 3, name: 'eggs'}
  ];

  return (
    <>
      <h1>Grocery List</h1>
      <ul>
        {items.map((item) => <li ={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

ReactDOM.render(<GroceryList />, document.getElementById('root'));