Question

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

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

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

请帮助！

Answer 1

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

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

依此类推...

Answer 2

地图覆盖对象的键

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

Answer 3

这里有两件事：

您将数据存储在哪里？
- 它处于状态吗？
  - 然后使用this.state。{propertyName}
    - @ dotnetdev4president解释了如何访问this.state.property，不同之处在于，应将引用用大括号括起来
- 它是常量吗？
  - 然后使用JavaScript的.map方法检查下面的示例
用于将数据呈现/显示到React Components
- 您可能要检查类似博客的条目：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已经回答了我的想法：）

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

3 个答案: