相邻的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

试试这个：

问题是，产品数组上的映射返回两个类型为Col的组件，React只接受一个返回的元素。

这里解释。

还有，

  <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>

Answer 2

地图的返回也需要包装在包含标记中，您可以使用React片段标记

<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>