我的 React 组件中有以下代码：
2
1005<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 应用程序编译成功。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
像普通组件一样，您只能在映射中返回 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>