지도 기능을 사용하여 React에서 객체 배열을 렌더링하는 방법은 무엇입니까?

React에서 객체 배열 렌더링

React에서 목록 렌더링은 동적 데이터를 표시하는 데 필수적입니다. 이 가이드는 지도 기능을 사용하여 React에서 객체 배열을 효율적으로 렌더링하는 방법을 보여줍니다.

접근 방식:

다음 React 구성 요소를 고려하세요.

<code class="javascript">class First extends React.Component {
  render() {
    const data = [{ name: "test1" }, { name: "test2" }];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

객체 배열을 렌더링하는 데는 두 가지 기본 접근 방식이 있습니다.

첫 번째 접근 방식:

매핑된 배열을 변수에 할당하고 렌더링 함수 내에서 반환합니다. :

<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>

두 번째 접근 방식:

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>

위 내용은 지도 기능을 사용하여 React에서 객체 배열을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!