12

私はこの反応コンポーネントを持っています。これは適切にレンダリングされていませんが、次のような迷惑な警告が表示されます

関数は 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 - その変更を行った後、render メソッドはメモリ クラッシュの可能性がある無限ループになっているようです

4

3 に答える 3

35

を呼び出す必要がありcreateSquareます。今は関数への参照を渡しているだけです。その後に括弧を追加します。

render() {
  return (
    <div>
      {this.createSquare()}
    </div>
  );
}
于 2018-07-07T05:21:36.297 に答える