反应警告:函数作为React子函数无效

Question

我有这个反应组件.这不是正确呈现,但得到一个恼人的警告,如

函数作为React子函数无效.如果您返回Component而不是渲染,则可能会发生这种情况.或许你打算调用这个函数而不是返回它.

这是我的组件.我在这做错了什么？

import React, { Component } from 'react';

class Squares extends Component {   

    constructor(props){
        super(props);
        this.createSquare = this.createSquare.bind(this);
    }

    createSquare() {
        let indents = [], rows = this.props.rows, cols = this.props.cols;
        let squareSize = 50;
        for (let i = 0; i < rows; i++) {
            for (let j = 0; i < cols; j++) {
                let topPosition = j * squareSize;
                let leftPosition = i * squareSize;
                let divStyle = {
                    top: topPosition+'px', 
                    left: leftPosition+'px'
                };
                indents.push(<div style={divStyle}></div>);
            }   
          }
        return indents;
    }    

    render() {
      return (
        <div>
            {this.createSquare()}
        </div>
      );
    }
}

export default Squares;

UPDATE

@Ross Allen - 完成更改后,渲染方法似乎处于无限循环中,可能会导致内存崩溃

Answer 1

你需要打电话createSquare,现在你只是传递对该功能的引用.之后添加括号:

render() {
  return (
    <div>
      {this.createSquare()}
    </div>
  );
}

Answer 2

React 使用 JSX 来渲染 HTML，并且 render() 中的返回函数应该只包含 HTML 元素，并且任何需要计算的表达式都必须{ }在https://reactjs.org/docs/introducing-jsx.html 中解释。但最佳实践是在 render() 内部执行 return 之外的任何操作，您可以在其中存储值并在 return() 中引用它们，并将使用限制{ }为仅简单的表达式评估。请参阅与 React 的深入 JSX 集成https://reactjs.org/docs/jsx-in-depth.html

render() {
var sq = this.createSquare();
return (
  <div>
    {sq}
  </div>
);

罗斯艾伦的回答也很好，重点是在 JSX 里面把任何操作/评估都附在里面 { }