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

Question

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

js lang-js prettyprint-override">  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>
  );
};

有人知道问题出在哪里吗？

Answer 1

兄弟，你试试看

<> </> 

这个标签像这样。。。

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

Answer 2

在你的. 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>
  );
};

Answer 3

实际上，render应该返回单个根元素，所以所有内容都应该包装在一个根元素中。

例如：

如果你能做到以下几点

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

FY:对于类似的兄弟姐妹，你还需要考虑独特的钥匙…

这也将有助于：https://reactjs.org/docs/fragments.html