我有一个通知组件，我有一个超时设置。超时后，我调用this.setState({isTimeout:true})。
我想做的是，如果已经超时，我只想渲染什么:
render() {
let finalClasses = "" + (this.state.classes || "");
if (isTimeout){
return (); // here has some syntax error
}
return (<div>{this.props.children}</div>);
}
问题是:
返回();//这里有一些语法错误
当前回答
是的，你可以从React渲染方法中返回一个空值。
您可以返回下列任意值:false、null、undefined或true
根据文件:
False、null、undefined和true是有效的子元素。他们 不要渲染。
你可以这样写
return null; or
return false; or
return true; or
return <div>{undefined}</div>;
然而，return null是最可取的，因为它表示不返回任何东西
其他回答
在render()函数中返回假值将不会呈现任何东西。所以你可以这样做
render() {
let finalClasses = "" + (this.state.classes || "");
return !isTimeout && <div>{this.props.children}</div>;
}
是的，你可以从React渲染方法中返回一个空值。
您可以返回下列任意值:false、null、undefined或true
根据文件:
False、null、undefined和true是有效的子元素。他们 不要渲染。
你可以这样写
return null; or
return false; or
return true; or
return <div>{undefined}</div>;
然而，return null是最可取的，因为它表示不返回任何东西
有些答案是稍微不正确的，并且指向了文档的错误部分:
如果你想让一个组件什么都不呈现，只需要返回null，就像每个doc:
在极少数情况下，您可能希望组件隐藏自己 由另一个组件呈现。要做到这一点，返回null而不是 它的渲染输出。
例如，如果你试图返回undefined，你会得到以下错误:
渲染没有返回任何东西。这通常意味着回报 语句缺失。或者，为了不呈现任何内容，返回null。
正如其他答案所指出的，null, true, false和undefined都是有效的子元素，这对于jsx中的条件渲染非常有用，但如果你想让你的组件隐藏/渲染任何东西，就返回null。
EDIT React 18:
React 18将允许未定义的渲染而不是抛出。请看这个公告。
如果你正在使用Typescript并且你的组件/函数有返回类型React。元素时，您将得到以下错误。
类型“null”不能分配给类型“ReactElement<any，字符串|” JSXElementConstructor >”。
解决方案是React.Fragment。
return <React.Fragment />
or
return <></>
是的，你可以，但不是空白，如果你不想从组件中呈现任何东西，只需返回null，就像这样:
return (null);
另一个重点是，在JSX中，如果你是有条件地呈现元素，那么在condition=false的情况下，你可以返回这些值中的任何一个false, null, undefined, true。根据DOC:
布尔值(true/false)、null和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' />
