如何将对象转换为包含对应key与value的div结构？

React 组件实现 #

function ObjectKeyValueRenderer(obj) {
  return (
    <div>
      {Object.entries(obj).map(([key, value]) => (
        <>
          <div className="key">
            {key}
          </div>
          <div className="value">
            {/* 如果value是对象/数组等复杂类型，可自行添加JSON.stringify(value)做转换 */}
            {value}
          </div>
        </>
      ))}
    </div>
  )
}

如果你使用的React版本不支持空标签<>简写，将其替换为<React.Fragment>即可。

原生JS生成HTML字符串实现 #

function generateObjectKeyValueHtml(obj) {
  const innerContent = Object.entries(obj).map(([key, value]) => {
    return ` <div className="key">
  ${key}
 </div>
 <div className="value">
  ${value}
 </div>`
  }).join('\n')
  return `<div>
${innerContent}
</div>`
}

输出效果验证 #

传入示例参数{id:"string",name:"string"}调用函数，得到的输出完全符合需求：

<div>
 <div className="key">
  id
 </div>
 <div className="value">
  string
 </div>
 <div className="key">
  name
 </div>
 <div className="value">
  string
 </div>
</div>

上述实现支持传入包含任意数量键值对的对象，会自动遍历生成对应的结构。

内容的提问来源于stack exchange，提问作者Noob