Question

我有一个简单的方法可以返回jsx，如下所示：

renderNewsItems = newsItems => {
    return(
        newsItems.map(newsItem => 
        <NewsItem title={newsItem.title} imageUrl={newsItem.imageUrl} />)
    );
  }

，这很好，但是当我尝试添加标记来布局各个<NewsItem />组件时，我正在努力弄清楚如何使其工作。我目前的失败尝试如下所示：

renderNewsItems = newsItems => {
    return(
        <div className="row">
            newsItems.map(newsItem => 
            <div className="col-4">
                <NewsItem title={newsItem.title} imageUrl={newsItem.imageUrl} />
            </div>
        </div>
    );
  }

这会导致错误：

'newsItem'未定义为un-undef

如果不清楚，我尝试使用引导网格系统来设置布局，以显示我的各个<NewsItem/>组件如何呈现

Answer 1

你很近。写下：

renderNewsItems = newsItems => {
  return (
    <div className="row">
      {newsItems.map(newsItem => (
        <div className="col-4">
          <NewsItem
            key={newsItem.id}
            title={newsItem.title}
            imageUrl={newsItem.imageUrl}
          />
        </div>
      ))}
    </div>
  );
};

注意：我假设您在id上拥有newsItem属性。如果没有，也可以将title用作key的值，直到它们在所有数组元素中都是唯一的为止。

React：将javascript与jsx混合

1 个答案: