是否有可能在react render函数中返回空？
我有一个通知组件，并且有一个超时设置。超时后，我调用this.setState({isTimeout:true})。
我想要做的是，如果已经超时了，我不想渲染任何东西：
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}问题是：
return ()；//这里有一些语法错误
回答 8
Stack Overflow用户
发布于 2017-02-07 14:36:44
可以，但如果您不想从组件中render任何内容，只需返回null，而不是空白，如下所示：
return (null);另一个要点是，在JSX中，如果要有条件地呈现元素，那么在condition=false的情况下，可以返回这些值中的任何一个false, null, undefined, true。根据
booleans (true/false), null, and undefined是有效的子，它们将被忽略，这意味着它们根本不会渲染。
所有这些JSX表达式都将呈现为相同的内容：
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>示例：
只会呈现奇数值，因为对于偶数值，我们将返回null。
const App = ({ number }) => {
if(number%2) {
return (
<div>
Number: {number}
</div>
)
}
return (null); //===> notice here, returning null for even values
}
const data = [1,2,3,4,5,6];
ReactDOM.render(
<div>
{data.map(el => <App key={el} number={el} />)}
</div>,
document.getElementById('app')
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
Stack Overflow用户
发布于 2018-09-07 21:17:15
一些答案略有错误，并指向文档的错误部分：
如果希望组件不呈现任何内容，只需按照doc返回null即可
在极少数情况下，您可能希望一个组件隐藏自身，即使它是由另一个组件呈现的。为此，请返回null，而不是其呈现输出。
例如，如果您尝试返回undefined，您将得到以下错误：
渲染未返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，则返回null。
正如其他答案所指出的，null、true、false和undefined是有效的子级，它们对于在中条件渲染非常有用，但是如果你想让你的组件什么都不隐藏/渲染，只需返回null即可。
Stack Overflow用户
发布于 2017-02-07 14:33:10
是的，你可以从React render方法返回一个空值。
您可以返回以下任何内容：false, null, undefined, or true
根据docs的说法
false、null、undefined和true是有效的子级。它们根本不会渲染。
你可以写
return null; or
return false; or
return true; or
return <div>{undefined}</div>; 但是，return null是最首选的，因为它表示不返回任何内容
https://stackoverflow.com/questions/42083181
复制相似问题