Блог

Я использую react-bootstrap вместе с reactjs. Я установил react-bootstrap со следующей командой :

 npm install react-bootstrap
  

вместо

 npm install react-bootstrap bootstrap
  

поскольку я хотел использовать CDN для таблицы стилей.

Теперь я хочу показать products_all от состояния до рендеринга в стиле строки-столбца, чтобы каждый 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, которое указывает на at </Row> .

Итак, как избавиться от ошибки?

Я думаю, вам нужно добавить a / к вашему второму Col , чтобы закрыть его, т.Е. </Col>

Теперь это сработало бы, ошибка заключалась в том, что вы пропустили / в Кол. После этого вы также получили бы ошибку {}. Структурировал это для вас 🙂

 import React, { Component } from 'react';
// use destructuring to import from reactstrap
import { Col, Row } from 'reactstrap';

// { } braces where not used properly
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}>
        ....
      {/* YOU WHERE MISSING / HERE HENCE THE ERROR */}
      </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;