Question

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

https://codesandbox.io/s/react-rss-feed-xtt86-这是我的代码所在的位置。您必须将firefox和CORS添加在一起才能使帖子通过。

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.

我是新来的人，因此对nooby问题感到抱歉！等不及要变得更好了。

非常感谢大家！立即成为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>

Answer 2

您可以执行以下示例

var news = [{
    title: 'first title',
    date: 'first news date'
  },
  {
    title: 'second title',
    date: 'second news date'
  },
  {
    title: 'third title',
    date: 'third news date'
  }
]
const panelList = document.getElementById('panel-list')

news.map(item => {
  panelList.innerHTML += `<div class="panel"><h2 class="panel-title"> ${item.title}</h2><span>${item.date}</span></div>`
})

<div id="panel-list">

</div>

除了在React中使用JSX的事实外，您可以在 render 函数中直接创建该映射。上面的纯JavaScript代码将转换为：

 <div className="panel-list" >
    {this.state.news.map(item => (
      <div className="panel" key={item.title}>
        <h2 className="panel-title">{item.title}</h2>
        <span>{item.date}</span>
      </div>
    ))}
</div>

此外，就像在另一条评论中提到的那样，别忘了向地图中的每个元素（每个key）添加panel属性，以便React可以正确识别项目。

如何在React中通过对象数组渲染/映射

2 个答案: