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
と機能しますが、リストアイテムに「キー」が提供されていないという警告が表示されます。
キー
キーを使用すると、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'));