我有一个通知组件,并且有一个超时设置。超时后我打电话this.setState({isTimeout:true})。
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(); //这里有一些语法错误
是的,您可以,但是null如果您不想render从组件中得到任何东西,则可以直接返回而不是空白,如下所示:
null
render
return (null);
另一个要点是,在JSX内部,如果您有条件地渲染元素,则在情况下condition=false,您可以返回这些值中的任何一个false, null, undefined, true。根据 DOC :
condition=false
false, null, undefined, true
booleans (true/false), null, and undefined是 有效的孩子 ,他们将被忽略,意味着他们根本不会渲染。
booleans (true/false), null, and undefined
所有这些JSX表达式将呈现相同的结果:
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' />