在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