Блог

Главная - Вопросы по программированию - Невозможно вернуть jsx внутри компонента класса

Невозможно вернуть jsx внутри компонента класса

#reactjs #class #return

#reactjs #класс #Возврат

Вопрос:

Я хочу установить условие для моей корзины, чтобы, когда длина корзины будет больше 0, она отображалась как компонент CartList и CartColumns. Однако он не может быть визуализирован. Я не знаю, что не так! Пожалуйста, помогите мне исправить мои коды! Большое вам спасибо!

Cart.js:

 import CartList from "./cart/CartList"

const ProductContext = React.createContext();

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Consumer>
          {(value) => {
            return <div>
              if(cart.length>0){
                return(
                  <div>
                  <CartColums/>
                  <CartList/>
                  </div>
                )
              }
            </div>
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

Ссылка на песочницу для лучшего observation:https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-buz0u?file=/src/cart/Cart.js

Комментарии:

1. корзина не определена.

Ответ №1:

У вас просто была синтаксическая ошибка (которая была выделена ссылкой codesandbox кстати). Рассмотрите возможность использования редактора / IDE, который выделяет простые ошибки, подобные этой.

РЕДАКТИРОВАТЬ: чтобы подробнее остановиться на синтаксической ошибке: после {(value) => {return <div> того, как вы вставили js, не заключив его в другую пару фигурных скобок. В этом случае решение состояло в том, чтобы return <div> полностью удалить here, поскольку в этом не было необходимости.

 import CartList from "./cart/CartList"

const ProductContext = React.createContext();

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Consumer>
          {(value) => {
              if(cart.length>0){
                return(
                  <div>
                  <CartColums/>
                  <CartList/>
                  </div>
                )
              }
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

Метки: