SyntaxError：相邻的 JSX 元素必须包含在封闭标记中答案

【问题标题】：SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tagSyntaxError：相邻的 JSX 元素必须包含在封闭标记中
【发布时间】：2026-01-12 09:00:01
【问题描述】：

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

  render() {
  return (

    
    <div className="blogpost">
     {this.state.articles.map((news, i) => {
return (
        <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>
          );
        })};
    </div>
  );
};

有谁知道问题出在哪里？

【问题讨论】：

这取决于你使用的 React 版本。如果您使用的是 React v15，那么您将不得不使用包装 html 元素。如果是 React 16，那么您可以使用 React 片段，或者将整个元素包装在简单的 [] 数组中

标签： javascript node.js reactjs react-native

【解决方案1】：

.map 后面缺少一个顶部包装元素。我使用了<React.Fragment>，但它会是你想要的任何东西。

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>
  );
};

【讨论】：

【解决方案2】：

实际上，渲染应该返回单个根元素，因此所有内容都应该包含在一个根元素中。

例如：

如果你会做以下事情

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

或

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

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

所以你需要做的就是将它们包装在一个根目录中。

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

或

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

仅供参考：对于类似的兄弟姐妹，您还需要考虑唯一键....

这也会有帮助：https://reactjs.org/docs/fragments.html

【讨论】：

实际上，OP 正在从 render 方法返回一个顶部 <div>。问题是元素 OP 从.map 返回。

【解决方案3】：

兄弟你试试吧

<> </>

这样的标签...

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

【讨论】：

【解决方案4】：

尝试： {[1,2,3]}

将行显示为数组元素。

它把每个

元素在单独的行上。

【讨论】：