JSX에서 속성이 있는 객체 목록 표시

Question

내 React 구성요소에 다음 코드가 있습니다:

<div className="mainApp">
            <div className="pkgsList">
                {pkgData.map((p) =>
                    <h3 키={p.name}>{p.name}</h3>
                )}
                    
            </div>
        </div>
    )

이 경우 pkgData는 이 시나리오에서 패키지를 설명하려고 시도하는 개체 배열입니다. 각 개체에는 문자열 속성 name 및 배열 속성 sources가 포함되어 있으며, 여기서 각 항목은 개체이기도 합니다. h3 요소 아래의 sources 항목을 인쇄하고 싶지만 항목을 추가하는 방법을 알 수 없습니다. 위의 다중 HTML/JSX - 어떤 도움이라도 대단히 감사하겠습니다.

각 p에 대해 지도를 호출하려고 했지만, 예를 들어 () 또는 그냥 {} 오류가 발생합니다

{p.map((s) => {
                       
})

따라서 생성된 div 코드는 다음과 같습니다.

                {pkgData.map((p) =>
                    
{p.name}
                    {p.map((c) => {
                        
                    })
                )}
            

Answer 1

일반 구성요소와 마찬가지로 맵에서는 jsx 요소 1개만 반환할 수 있습니다. 지도 함수에서 여러 요소를 렌더링하려면 다음과 같이 반응 조각으로 코드를 래핑할 수 있습니다.

으아악

Answer 2

지도 오류

우선, pkgData.map 안에 중첩된 지도가 잘못되었습니다. p 자체는 배열이 아니기 때문입니다. 지도는 다음과 같아야 합니다.

으아악

JSX 오류

둘째, @David가 댓글에서 말했듯이 JSX가 내부적으로 작동하는 방식으로 인해 여러 개의 최상위 요소를 가질 수 없습니다. 예를 들어 코드

으아악

이것과 동일

으아악

따라서 최상위 수준에서 여러 JSX 요소를 반환하면 React.createElement가 작동하지 않습니다. 따라서 조각(<>), div 등과 같은 일부 태그를 사용하여 최상위 수준에서 콘텐츠를 래핑해야 합니다.

예를 들어

으아악

참고용: https://react.dev/reference /react/createElement#creating-an-element-without-jsx