javascript - 你的渲染方法应该有return语句吗？

Question

class App extends React.Component {


  render() {

    productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

我究竟做错了什么？

Answer 1

正如错误所述，您没有从渲染函数中返回任何内容。如果您使用的是 v16 或更高版本的 react，则返回映射结果将解决问题。

class App extends React.Component {


  render() {

    return productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

如果您使用的是较低版本，请将 map 函数的结果包装在 div 中

render() {

    return <div>{productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    })}<div>
  }

Answer 2

我将创建一个单独的变量来运行地图并返回内容，然后在渲染中的 return 语句中添加变量

render() {
return (
 <div> {content} </div>
 )
}