reactjs - 相邻的 JSX 元素必须包含在带有引导列的封闭标记中

Question

我正在使用 React Bootstrap 并尝试遍历位于两个单独列中的内容，如下所示：

  <Container>
    <Row>
      {this.state.products.map(product => (
      <Col md={8}>
        <div className="title">{product.name}</div>
        <div className="desc">{product.description}</div>
      </Col>
      <Col md={4}>
        <div className="price">{product.price}</div>
      </Col>
      ))}
    </Row>
  </Container>

我有结束标签，所以不知道为什么会收到错误消息？

Answer 1

你的地图的返回也需要包装在一个包含标签中，你可以使用 React 片段标签 <> https://reactjs.org/docs/fragments.html#short-syntax

<Container>
    <Row>
      {this.state.products.map(product => (
         <>
           <Col md={8}>
              <div className="title">{product.name}</div>
              <div className="desc">{product.description}</div>
           </Col>
          <Col md={4}>
            <div className="price">{product.price}</div>
          </Col>
      </>
      ))}
    </Row>
  </Container>

Answer 2

尝试这个：

问题是，您map的产品Array返回两个类型的组件Col，而 React 只接受一个返回的元素。

在这里解释。

此外，<React.Fragment></React.Fragmint>组件包装器也可以使用以下语法编写：<></>

  <Container>
    <Row>
      {this.state.products.map(product => (
        <React.Fragment>
          <Col md={8}>
            <div className="title">{product.name}</div>
            <div className="desc">{product.description}</div>
          </Col>
          <Col md={4}>
            <div className="price">{product.price}</div>
          </Col>
        </React.Fragment>
      ))}
    </Row>
  </Container>