React 警告:函数作为 React 子函数无效

Question

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

函数作为 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 - 进行该更改后，渲染方法似乎处于无限循环中，可能会发生内存崩溃

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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