JSX のプロパティを持つオブジェクトのリストを表示する

Question

React コンポーネントには次のコードがあります。

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

この場合、pkgData は、このシナリオでパッケージを記述しようとするオブジェクトの配列です。各オブジェクトには文字列プロパティ name と配列プロパティ sources が含まれており、各項目もオブジェクトです。 sources 内の項目を h3 要素の下に出力したいのですが (各項目には複数のプロパティがあります)、さらに追加する方法がわかりません。上記の複数の HTML/JSX - 助けていただければ幸いです。

各 p のマップを呼び出そうとしていますが、それを () でラップするか、単に {} でラップするかにかかわらず、たとえば、エラー

が発生します

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

したがって、生成される div コードは次のようになります:

<div className="pkgList">
                {pkgData.map((p) =>
                    <h3 key={p.name}>{p.name}</h3>
                    {p.map((c) => {
                        
                    })
                )}
            </div>

React アプリは正常にコンパイルできません。

Answer 1

通常のコンポーネントと同様、マップ内で返すことができる jsx 要素は 1 つだけです。 Map 関数で複数の要素をレンダリングする場合は、次のように反応スニペットでコードをラップできます:

リーリー

Answer 2

地図エラー

まず第一に、pkgData.map 内のネストされたマップが間違っています。 p 自体は配列ではないためです。 マップは次のようになります。

リーリー

JSXエラー

第二に、@David がコメントで述べたように、JSX が内部で動作する仕組みのため、複数のトップレベル要素を持つことはできません。 たとえばコード

リーリー

はこの

と同等です リーリー

したがって、最上位で複数の JSX 要素を返す場合、React.createElement は機能しません。 したがって、fragment(<>)、div などのタグを使用して、最上位でコンテンツをラップする必要があります。

＃＃＃例えば、＃＃＃ リーリー

参考専用:

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