ホームページ > 記事 > ウェブフロントエンド > React で配列を効率的にレンダリングするにはどうすればよいですか?
React 配列のレンダリングが簡単になりました
React での要素のリストのレンダリングは一般的なタスクです。これを効率的に行う方法は次のとおりです:
最初の方法:
<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>
この方法では、React 要素の配列を作成し、コンテナー div でレンダリングします。
2 番目のメソッド:
<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>
このメソッドは、map 関数を return ステートメントで直接使用するため、構文が簡素化されます。
これらのメソッドのいずれか好みに応じて、React でオブジェクトの配列をレンダリングするために使用できます。
以上がReact で配列を効率的にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。