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;

更新

@Ross Allen-进行更改后，render方法似乎陷入无限循环，可能导致内存崩溃

Answer 1

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

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

Answer 2

React使用JSX渲染HTML，并且render（）中的return函数应仅包含HTML元素，并且需要评估的任何表达式都必须位于{ }之内，如https://reactjs.org/docs/introducing-jsx.html所述。但是，最佳实践是在return（）内部进行任何操作，即可在其中存储值并在return（）中引用它们，并将{ }的使用限制为简单的表达式求值。请参阅与React https://reactjs.org/docs/jsx-in-depth.html

的深度JSX集成。

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

罗斯·艾伦（Ross Allen）的回答也很好，重点是在JSX内部将{ }内的任何操作/评估括起来

Answer 3

您只需要从函数调用中删除（）。

/message

React警告：函数作为React子元素无效

3 个答案: