我有一个通知组件,我有一个超时设置。超时后,我调用this.setState({isTimeout:true})。
我想做的是,如果已经超时,我只想渲染什么:
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}
问题是:
返回();//这里有一些语法错误
有些答案是稍微不正确的,并且指向了文档的错误部分:
如果你想让一个组件什么都不呈现,只需要返回null,就像每个doc:
在极少数情况下,您可能希望组件隐藏自己
由另一个组件呈现。要做到这一点,返回null而不是
它的渲染输出。
例如,如果你试图返回undefined,你会得到以下错误:
渲染没有返回任何东西。这通常意味着回报
语句缺失。或者,为了不呈现任何内容,返回null。
正如其他答案所指出的,null, true, false和undefined都是有效的子元素,这对于jsx中的条件渲染非常有用,但如果你想让你的组件隐藏/渲染任何东西,就返回null。
EDIT React 18:
React 18将允许未定义的渲染而不是抛出。请看这个公告。
有些答案是稍微不正确的,并且指向了文档的错误部分:
如果你想让一个组件什么都不呈现,只需要返回null,就像每个doc:
在极少数情况下,您可能希望组件隐藏自己
由另一个组件呈现。要做到这一点,返回null而不是
它的渲染输出。
例如,如果你试图返回undefined,你会得到以下错误:
渲染没有返回任何东西。这通常意味着回报
语句缺失。或者,为了不呈现任何内容,返回null。
正如其他答案所指出的,null, true, false和undefined都是有效的子元素,这对于jsx中的条件渲染非常有用,但如果你想让你的组件隐藏/渲染任何东西,就返回null。
EDIT React 18:
React 18将允许未定义的渲染而不是抛出。请看这个公告。