Question

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

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

Answer 1

实际上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>
 );
}

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

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

Answer 2

在DATETIME之后，您缺少顶部的环绕元素。我使用了NestedStackedInline，但是您想要的任何东西。

NestedTabularInline

Answer 3

兄弟，您只需尝试

<> </>

像这样的标签...

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

Answer 4

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

将行显示为数组元素。

将每个

元素放在单独的行上。

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

4 个答案: