javascript - 如何通过 React 中的对象数组渲染/映射

Question

我创建了一个使用 RSS 提要的 React 组件。目前它只显示第一条新闻的标题。我希望能够将所有帖子标题映射到渲染中。

https://codesandbox.io/s/react-rss-feed-xtt86 - 这是我的代码所在的位置。您将必须使用带有 CORS 附加功能的 firefox 才能使发布的项目通过。

this.state = { news: [{}, {}] }; <-- This gets populated with the news items

<div className="panel-list">{this.state.news[1].title}</div> <!-- This is how it is being rendered onto the page at the minute.

我是新来的，很抱歉这个菜鸟问题!等不及要好起来了。

非常感谢大家!很快就会成为 React 专家 (;

Answer 1

您可以简单地使用 map从数组中渲染多个组件:

this.state = { news: [{}, {}] };
...

const news = this.state.news.map((newsItem) =>
  <div key={newsItem.id} className="panel-list">{newsItem.title}</div>
);

请注意，我为每个 div 添加了一个 key 属性。正如 here 所解释的那样，这对于赋予元素稳定的特性很重要。 .它需要是每个 news 条目的唯一标识符(此处以“id”为例)。

要呈现 news 变量，您只需要使用花括号。例如，将其呈现在一个 div 中:

<div>{news}</div>

您也可以直接呈现列表，而不创建变量(虽然有点困惑):

<div>
  {this.state.news.map((newsItem) =>
    <div key={newsItem.id} className="panel-list">{newsItem.title}</div>
  )}
</div>