Liste der Objekte mit Eigenschaften in JSX anzeigen

Question

Ich habe den folgenden Code in meiner React-Komponente:

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

In diesem Fall ist pkgData ein Array von Objekten, das versucht, das Paket in diesem Szenario zu beschreiben. Jedes Objekt enthält eine String-Eigenschaft name und eine Array-Eigenschaft sources, wobei jedes Element auch ein Objekt ist. Ich möchte die Elemente in sources unter dem Element h3 drucken (jedes Element hat mehrere Eigenschaften), aber ich weiß anscheinend nicht, wie ich weitere hinzufügen kann das oben genannte Multiple HTML/JSX – jede Hilfe wäre sehr dankbar.

Ich habe versucht, die Karte für jedes p aufzurufen, aber ob ich sie beispielsweise in () oder nur {} Ich erhalte die Fehlermeldung

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

Der generierte Div-Code lautet also:

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

Meine React-App kann nicht erfolgreich kompiliert werden.

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