React 警告：函数作为 React 子级无效答案

【问题标题】：React warning: Functions are not valid as a React childReact 警告：函数作为 React 子级无效
【发布时间】：2018-12-15 15:18:16
【问题描述】：

我有这个反应组件。这没有正确渲染，但会收到一个烦人的警告，例如

函数作为 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;

更新

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

【问题讨论】：

您将函数引用作为子项传递。技术上应该是 {this.createSquare()}
为什么错误信息不清晰？只有两个地方你会经过一个孩子。
@FelixKling：是的，错误消息有点令人困惑。即使在我立即调用函数 createSquare() 之后，我仍然遇到内存错误。
i < cols 应该是j < cols
请不要更正原始代码块。这使得有类似问题的人很难看到它是如何解决的。

标签： javascript reactjs react-component

【解决方案1】：

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

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

【讨论】：

刚刚更新了我的问题。进行更改后由于无限循环而出现内存崩溃错误。关于为什么会发生这种情况的任何见解？更准确地说，缩进数组长度约为 5062116。
这意味着您尝试调用的组件之间的关系正在某个地方循环发生。因此，父级被调用，调用该组件，该组件在某处触发该父级再次被调用。
@ArindamSahu 嘿，我刚刚遇到了同样的问题，抱怨无限循环，你知道如何解决这个问题吗？

【解决方案2】：

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

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

Ross Allen 的回答也很好，重点是在 JSX 内部将任何操作/评估都包含在 { } 内

【讨论】：

【解决方案3】：

你只需要从你的函数调用中删除 ()。

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

【讨论】：