时间戳

首页 > 解决方案 > 遍历数组以渲染没有 div 元素的动态数据

javascript - 遍历数组以渲染没有 div 元素的动态数据

问题描述

{ 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>

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

标签： javascriptreactjs

解决方案

从语义上考虑，用 包装是个好主意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>
  </>
)

啊，你还需要提供key道具：

<dl key={key}>

或者，使用片段：

<React.Fragment key={key}>

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

<key={key>
</>

推荐阅读