无法在类组件中返回 jsx答案

【问题标题】：Cannot return a jsx inside a class component无法在类组件中返回 jsx
【发布时间】：2022-01-07 00:51:34
【问题描述】：

我想为我的购物车设置条件，以便当购物车的长度大于 0 时，它将呈现 CartList 和 CartColumns 组件。但是，它无法呈现。我不知道怎么了！请帮我修复我的代码！非常感谢！

购物车.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>
    );
  }
}

沙盒链接，方便观察：https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-buz0u?file=/src/cart/Cart.js

【问题讨论】：

购物车未定义。

标签： reactjs class return

【解决方案1】：

您只是遇到了语法错误（顺便说一句，代码和框链接突出显示了该错误）。考虑使用能够突出显示此类简单错误的编辑器/IDE。

编辑：进一步详细说明语法错误：在{(value) => {return <div> 之后，您插入了 js，但没有将其包裹在另一对大括号中。在这种情况下，解决方案是在此处完全删除 return <div>，因为它是不必要的。

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>
    );
  }
}

【讨论】：