时间戳

首页 > 解决方案 > 循环内的 HTML 未在 React 中呈现

javascript - 循环内的 HTML 未在 React 中呈现

问题描述

我正在尝试使用 Gatsby 在 DOM 中列出查询的帖子。下面的小片段应该足够了，因为 Graphql 查询正在正确获取数据。此代码段位于组件内，该组件也正确呈现。我是 Gatsby 和 React 的新手，我希望我错过了一些非常基本的东西。

<div className="container">
  Hello! // Renders
  {newsItems.map(newsItem => {
    console.log(newsItem.context.id); // Logs each news item id to console correctly
    Hello! // Does not render
    <p>{newsItem.context.id}</p> // Does not render
  })}
</div>

标签： javascriptreactjsgraphql

解决方案

您已经使用了花括号，所以这就是您从 map 函数返回组件的方式。

{newsItems.map(newsItem => {
    console.log(newsItem.context.id); // Logs each news item id to console correctly
    return (
        <>
            Hello!
            <p>{newsItem.context.id}</p>
        </>
   )
})}

没有试过这个，但它应该工作。这也仅在newsItems包含值时才有效。使用React Fragments <>...</>是因为 return 必须只返回单个组件。您也可以使用<div>...</div>而不是片段。

尝试这个。

推荐阅读