Javascript SyntaxError：相邻的JSX元素必须包装在一个封闭的标记中

我试图在页面中显示文章，但我遇到了一些问题，需要在reactjs中封装标签。看起来React不接受相邻的相同标记如何显示表格数据

render（）{
返回(
{this.state.articles.map（（新闻，i）=>{
返回(
{news.tittle}
{news.content}

今天
{this.formatDate（news.created）}
聊天泡泡提纲
);
})};
);
};在
.map
之后缺少顶部包装元素。我用了
，但它可以是你想要的任何东西

render() {
  return (


    <div className="blogpost">
     {this.state.articles.map((news, i) => {
return (
        <React.Fragment>
        <div className="image-wrapper">
          <img className="responsive-img" src="http://loremflickr.com/320/240" />
        </div>
        <div className="content"  key={i}>
          <h4>{news.tittle}</h4>
          <p>{news.content}</p>
        </div>
        <div className="footer">
          <div className="row">
            <div className="footer-content">
              <i className="material-icons">today</i>
              <span>{this.formatDate(news.created)}</span>
            </div>
            <div className="footer-content">
              <i className="material-icons">chat bubble outline</i>
              <a href="">6</a>
            </div>
          </div>
        </div>
        <div className="read-more">
          <a href="">Read more</a>
        </div>
        </React.Fragment>
          );
        })};
    </div>
  );
};

render（）{
返回(
{this.state.articles.map（（新闻，i）=>{
返回(
{news.tittle}
{news.content}

今天
{this.formatDate（news.created）}
聊天泡泡提纲
);
})};
);
};
实际上render应该返回单个根元素，因此所有内容都应该包装在一个根元素中

例如：

如果你能做到以下几点

render() {
 return(
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 );
}

render（）{
返回(




);
}

或

render（）{
返回(
....
....
....
....
);
}

您将得到与当前情况相同的错误（“…需要包装的封闭标记”）

所以您需要做的是将它们包装在一个根中

render() {
 return(
  <React.Fragment>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
  </React.Fragment>
 );
}

render（）{
返回(
....
....
....
....
);
}

或

render（）{
返回(
....
....
....
....
);
}

对于类似的兄弟姐妹，你还需要考虑唯一的键…

这也会很有帮助：
兄弟，你可以试试看

<> </> 



这个标签像这样

render() {
  return(
    <>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </>
  );
}

render（）{
返回(




);
}
试试：
{[1
，2
，3
}

将线显示为数组元素

它将每个元素放在一个单独的行上。
这取决于您使用的React版本。如果您使用的是React v15，那么必须使用包装html元素。如果是React 16，那么您可以使用React fragements，或者将整个元素封装在简单的
[]
阵列中。实际上，OP是从
渲染方法返回一个top
。问题是元素OP从
.map
返回。
<> </> 

render() {
  return(
    <>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </>
  );
}