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

Posted 2023-02-23

【中文标题】React 警告：函数作为 React 子级无效

【英文标题】：React warning: Functions are not valid as a React child

【发布时间】：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

请不要更正原始代码块。这使得有类似问题的人很难看到它是如何解决的。

【参考方案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>
  );