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