reactjs - 无法在 react.js 应用程序中使用 react-bootstrap 在渲染部分使用带有 Row 和 Col 的映射函数

问题描述

我正在使用react-bootstrap和reactjs。我使用以下命令安装了 react-bootstrap：

npm install react-bootstrap

代替

npm install react-bootstrap bootstrap

因为我想将 CDN 用于样式表。

现在我想products_all从状态显示以 Row-Column 样式呈现，以便每个Row包含 4 Cols。该products_all状态充满了一个 ajax 调用，axios为了保持代码简洁，我没有在这里展示。

    import React, { Component } from 'react'
    import Col from 'react-bootstrap/Col'
    import Row from 'react-bootstrap/Row'

    class ProductsWise extends Component {

        constructor (props) {
          super(props)
      
          this.state = {
            products_all:[],
            
          }
    
    
           render () {

              const cols = this.state.products_all.map( (item, idx) => ( 
        
               <Col key={item} lg={3}>
                    ....
               <Col>

               ));

               
            const noRows =  Math.ceil(this.state.products_all.length / 4);
        
            const rows = Array.from(Array(noRows)).map((n, i) =>(
              
              <Row>
             
                  {cols.slice(i* 4, i * 4)}

              </Row>

            ));
        
            return rows;
           }
          }

export default ProductsWise

但是npm run watch在命令提示符下使用命令我得到错误：未终止的JSX 内容，它表示在</Row>.

那么如何摆脱错误呢？

标签： reactjsreact-bootstrap

reactjs - 无法在 react.js 应用程序中使用 react-bootstrap 在渲染部分使用带有 Row 和 Col 的映射函数

问题描述

解决方案

推荐阅读