我的 React 组件中有以下代码：
2
986<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>地图错误
首先，您在
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