迭代数组以呈现没有 div 元素的动态数据[重复]

Question

{ Object.keys(props.data).map((key, value) => {


  return(
         <div>
            <dt className="col-sm-3">{key}</dt>
            <dd className="col-sm-9">{props.data[key]}</dd>
         </div>
        )
  })}

上面的代码创建了以下内容：

Key
Value

在没有 div 包装元素的情况下对上述内容进行硬编码时：

Key           value

完整的代码块：

 <div className="row">
            <div className="col-lg-6">
                <div className="mb-5">
                    <h5 className="text-black">
                        <strong>{props.title}</strong>
                    </h5>
                    <dl className="row">
                        <dt className="col-sm-3">A</dt>
                        <dd className="col-sm-9">A</dd>
                    </dl>
                </div>
            </div>
        </div>

所以我的问题 id 是 div 包装元素，有没有办法使用 map 来呈现动态数据而不返回 div 包装元素？

Answer 1

从语义上考虑，用dl 包装是个好主意：

return(
  <dl>
    <dt className="col-sm-3">{key}</dt>
    <dd className="col-sm-9">{props.data[key]}</dd>
  </dl>
)

但是查看您已经定义 dl 的代码以及您正在使用该组件的代码？

如果你不喜欢上面的解决方案，那么你应该使用React.Fragment：（尽可能使用上面的）

return(
  <> {/* alias for React.Fragment */}
    <dt className="col-sm-3">{key}</dt>
    <dd className="col-sm-9">{props.data[key]}</dd>
  </>
)

---

啊，你还需要提供keyprops：

<dl key={key}>

或者，使用片段：

<React.Fragment key={key}>

以下无效使用：（速记方法不支持任何道具）

<key={key>
</>