javascript - react 警告 : Functions are not valid as a React child

Question

我有这个 react 组件。这没有正确呈现，但会收到一个烦人的警告，如

函数作为 React 子项是无效的。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。

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

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;

更新

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

Answer 1

您需要调用 createSquare，现在您只是传递一个对该函数的引用。在其后添加括号:

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