如何在 React 中的 HTML 中显示对象的所有属性答案

【问题标题】：How to show all properties of an object in HTML in React如何在 React 中的 HTML 中显示对象的所有属性
【发布时间】：2025-12-14 12:35:02
【问题描述】：

  {
    title: "My Title",
    entryID: 1,
    url: "#",
    author: "William Pears, Andrew Cutcher",
    comment_count: 2
  }

我得到了这个对象，我正试图弄清楚如何在我的 React 组件中显示它。

我想像博客条目一样显示，当点击标题时，我希望链接（url）并在博客条目上显示作者..

请帮忙！！

【问题讨论】：

请将反应代码粘贴到您要显示此对象的位置
这个问题的意思是“我有这个对象，请编写我的应用程序来做我想做的任何事情，而无需我尝试任何事情”
欢迎来到 * 伯纳德！请附上您目前编写的代码，以便我们了解您遇到的问题，并为您提供帮助。

标签： javascript reactjs list

【解决方案1】：

映射覆盖对象的键

{Object.keys(yourObject).map(function(key) { return <div>Key: {key}, Value: {yourObject[key]}</div>; })}

【讨论】：

【解决方案2】：

这里有两件事：

您会将数据存储在哪里？
- 是否处于状态？
  - 然后使用 this.state.{propertyName}
    - @dotnetdev4president 解释了如何访问 this.state.property，但您应该将引用括在花括号中
- 它是一个常数吗？
  - 然后使用 JavaScript 的 .map 方法检查下面的示例
用于渲染/显示数据到 React 组件
- 您可能想查看类似博客的条目：https://reactstrap.github.io/components/card/

使用上面提到的 .map 循环遍历您的对象，如下所示：

const yourExampleDataConstant = {
  title: "My Title",
  entryID: 1,
  url: "#",
  author: "William Pears, Andrew Cutcher",
  comment_count: 2
};

return <div>
  {yourExampleDataConstant.map(element => (
    return <ul key={element.entryID} >
      <a href={element.url}><li>{element.title}</li></a>
      <li>{element.author}</li>
      <li>{element.comment_count}</li>
    </ul>
  ))}
</div>;

}

但是，您的代码上下文会很有用！

希望这会有所帮助！

PS。看起来我在写答案时，@nikhilkarkra 已经回复了我的想法:)

【讨论】：

谢谢！！正是我需要的！！！ Reactstrap 看起来也很棒，谢谢 Scott

【解决方案3】：

如果您使用 this.setState({your_object}) 将数据保存到状态中，您可以在 jsx 中轻松输出：

<p>this.state.title</p>
<p>this.state.author</p>

等等……

【讨论】：