React에서 객체 배열을 표시하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React에서 객체 배열을 표시하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-07 21:13:02

원래의

1007명이 탐색했습니다.

How to Display an Array of Objects in React?

React에서 객체 배열을 표시하는 방법

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: 반환 시 직접 매핑

또는 중간 변수:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!