React でオブジェクトの配列を表示するには、配列を表示要素に変換するマッピング プロセスが必要です。
レンダリングされたアイテムへの配列のマッピング
オブジェクトの配列をレンダリングするには、.map() 関数を利用できます。この関数は、個々の配列要素を入力として受け入れるコールバック関数を受け取ります。
オプション 1: マップされたアイテムを変数に保存する
<code class="javascript">render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); return ( <div> {listItems } </div> ); }</code>
ここでは、listItems 変数に保存されます。マップされた要素。その後、
オプション 2: Return での直接マッピング
または、中間変数:
<code class="javascript">render() { const data =[{"name":"test1"},{"name":"test2"}]; return ( <div> {data.map(function(d, idx){ return (<li key={idx}>{d.name}</li>) })} </div> ); }</code>
このバリエーションでは、マッピング関数は return ステートメント内で直接呼び出されます。
一意の識別子のキー
の場合配列をレンダリングする場合、各項目に一意のキーを提供することが不可欠です。どちらのオプションでも、レンダリングされた各要素にキーが追加され、レンダリングのパフォーマンスが最適化され、効率的な更新が可能になります。
以上がReact でオブジェクトの配列を表示するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。