在JSX中顯示帶有屬性的物件列表

Question

我的 React 元件中有以下程式碼：

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

在本例中，pkgData 是一個物件數組，它嘗試描述此場景中的套件。每個物件都包含一個字串屬性 name 和一個陣列屬性 sources，其中每個專案也是一個物件。我想在h3 元素下面打印sources 中的項目（每個項目有幾個屬性），但我似乎不知道如何在上面的內容上添加更多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

像普通元件一樣，您只能在映射中傳回 1 個 jsx 元素。如果你想在地圖函數中渲染多個元素，你可以將程式碼包裝在一個反應片段中，如下所示：

<div className="mainApp">
    <div className="pkgsList">
        {pkgData.map((p) => (
            <> {/* <- this is a fragment */}
                <h3 key={p.name}>{p.name}</h3>
                {p.sources.map((s) => (
                    <>{/* render source here */}</>
                ))}
            </>
        ))}
    </div>
</div>

Answer 2

地圖錯誤

首先，您在 pkgData.map 內的巢狀地圖是錯誤的。 因為 p 本身不是陣列。 地圖應該是這樣的，

{p.sources.map((c) => {
    ...
    }
  )}

JSX 錯誤

第二，正如 @David 在評論中所說，由於 JSX 在底層的工作方式，你不能有多個頂級元素。 例如程式碼

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

相當於這個

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

因此，如果您在頂層傳回多個 JSX 元素，React.createElement 將無法運作。 因此，您應該使用一些標籤（如fragments()、div 等）將內容包裝在頂層。

例如，

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

僅供參考：https://react.dev/reference /react/createElement#creating-an-element-without-jsx