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

Question

我有这个 React 组件。这没有正确呈现，但收到像

这样烦人的警告

函数作为 React 子项无效。如果您 return 组件而不是来自渲染，则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。

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

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>
  );
}

Answer 2

React 使用 JSX 渲染 HTML 和 render() 中的 return 函数应该只包含 HTML 元素，任何需要计算的表达式必须在 [=11= 内] 如 https://reactjs.org/docs/introducing-jsx.html. But the best practice would be to do any operation outside return just inside render() where you can store the values and refer them in the return() and restrict usage of { } to just simple expression evaluation. Refer for In depth JSX integration with React https://reactjs.org/docs/jsx-in-depth.html

中所述

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

Ross Allen 的回答也很好，关键是 Inside JSX enclosed any operation / evaluation inside { }

Answer 3

您只需从函数调用中删除 ()。

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

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

React warning: Functions are not valid as a React child

javascript

reactjs

react-component