React에서 객체 배열 렌더링
React에서 객체 배열의 데이터 목록을 표시하려면 기존 방식과 약간 다른 접근 방식이 필요합니다. HTML.
접근 방법 1: React 요소 배열 생성
React에서 객체 배열을 렌더링하는 한 가지 방법은 먼저 React 요소 배열을 생성하는 것입니다. 배열의 단일 항목을 나타냅니다. 예는 다음과 같습니다.
render() { const data = [{ name: "test1" }, { name: "test2" }]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); return ( <div> {listItems} </div> ); }
이 접근 방식은 배열의 각 항목에 대해 새로운 React 요소를 생성하여 각 항목이 식별을 위한 고유 키를 갖도록 합니다.
접근 방식 2: 반환 시 인라인 맵 함수
대체 방법은 JSX 반환 문에 매핑 함수를 직접 포함하는 것입니다.
render() { const data = [{ name: "test1" }, { name: "test2" }]; return ( <div> {data.map((d, idx) => <li key={idx}>{d.name}</li>)} </div> ); }
이 접근 방식을 사용하면 별도의 배열을 생성할 필요가 없습니다. React 요소로 코드를 더욱 간결하게 만듭니다.
주요 속성
객체 목록을 렌더링할 때 각 React 요소에 고유한 키 속성을 할당하는 것이 중요합니다. 이를 통해 React는 데이터가 변경될 때 DOM의 특정 요소를 효율적으로 식별하고 업데이트할 수 있습니다.
위 내용은 React에서 객체 배열을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!