时间戳

首页 > 解决方案 > SyntaxError：相邻的 JSX 元素必须包含在封闭标记中

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

问题描述

我尝试在页面中显示文章，但我遇到了一些问题，需要在 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>
  );
};

有谁知道问题出在哪里？

标签： javascriptnode.jsreactjsreact-native

解决方案

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

例如：

如果您将执行以下操作

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

推荐阅读