javascript 反应警告：函数作为反应孩子无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51220135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React warning: Functions are not valid as a React child
提问by Arindam Sahu
I have this react component. This is not rendering properly but getting an annoying warning like
我有这个反应组件。这不是正确渲染，而是收到一个烦人的警告，比如
Functions are not valid as a React child. This may happen if you return a Component instead of from the render. Or maybe you meant to call this function rather than return it.
函数作为 React 子元素无效。如果您返回 Component 而不是从渲染中返回，则可能会发生这种情况。或者，您可能打算调用此函数而不是返回它。
Here's my component. What am I doing wrong here?
这是我的组件。我在这里做错了什么？
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;
UPDATE
更新
@Ross Allen - After making that change, the render method seems to be in infinite loop with potential memory crash
@Ross Allen - 进行更改后，渲染方法似乎处于无限循环中，可能会导致内存崩溃
回答by Ross Allen
You need to call createSquare, right now you're just passing a reference to the function. Add parentheses after it:
您需要调用createSquare，现在您只是传递对该函数的引用。后面加括号：
render() {
return (
<div>
{this.createSquare()}
</div>
);
}
回答by uk2797
React uses JSX to render HTML and return function within render() should contain only HTML elements and any expression that needed to be evaluated must be within { }as explanied in 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
React 使用 JSX 来渲染 HTML，并且 render() 中的返回函数应该只包含 HTML 元素，并且任何需要评估的表达式都必须{ }在https://reactjs.org/docs/introducing-jsx.html 中解释。但最佳实践是在 render() 内部执行 return 之外的任何操作，您可以在其中存储值并在 return() 中引用它们，并将使用限制{ }为仅简单的表达式评估。请参阅与 React 的深入 JSX 集成https://reactjs.org/docs/jsx-in-depth.html
render() {
var sq = this.createSquare();
return (
<div>
{sq}
</div>
);
Ross Allen's answer is also fine , the point is Inside JSX enclose any operation / evaluation inside { }
罗斯艾伦的回答也很好，重点是在 JSX 里面把任何操作/评估都附在里面 { }
回答by HaMiD Sani
You just need to remove () from your function call.
您只需要从函数调用中删除 ()。
render() {
return (
<div>
{this.createSquare}
</div>
);
}
