我有一个通知组件,我有一个超时设置。超时后,我调用This.SetState({IsTimeout:True})
。
我想做的是,如果已经超时,我想只呈现任何内容:
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}
问题是:
返回();//这里有一些语法错误
可以,但如果您不想render
组件中的任何内容,只需返回null
,而不是空白,如下所示:
return (null);
另一个要点是,在JSX内部,如果您是有条件地呈现元素,那么在condition=false
的情况下,您可以返回以下任何值false、null、undefined、true
。根据单据:
boolean(true/false)、null和undefined
是有效的子级,它们将被忽略,意味着它们不呈现。
所有这些JSX
表达式将呈现相同的内容:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
示例:
只呈现奇数值,因为对于偶数值,我们返回null
。
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' />