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>

所以我的问题是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>
  </>
)

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

<dl key={key}>

或者，使用片段：

<React.Fragment key={key}>

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

<key={key>
</>

在数组上进行迭代以呈现没有div元素的动态数据

1 个答案: