在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（）; //这里有一些语法错误

是的，您可以，但是null如果您不想render从组件中得到任何东西，那么可以直接返回而不是空白，如下所示：

return (null);

另一个要点是，在JSX内部，如果您有条件地渲染元素，则​​在情况下condition=false，您可以返回这些值中的任何一个false, null, undefined, true。根据DOC：

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' />

一些答案有些不正确，指向文档的错误部分：

如果您想让组件什么都不渲染null，则按照doc返回：

在极少数情况下，您可能希望某个组件隐藏自身，即使该组件是由另一个组件渲染的也是如此。为此，返回null而不是其渲染输出。

undefined例如，如果尝试返回，则会出现以下错误：

渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null。

正如其他的答案中指出，null，true，false和undefined有效孩子这是有条件的渲染有用里面你的JSX，但你希望你的组件隐藏/渲染什么，只是返回null。

是的，您可以从React渲染方法返回一个空值。

您可以返回以下任何内容： false, null, undefined, or true

根据文档：

false，null，undefined，和true有效的儿童。他们只是不渲染。

你可以写

return null; or
return false; or
return true; or
return undefined; 

但是return null，最优选的是，它表示不返回任何内容

有点偏离主题，但是如果您需要一个永远不会呈现任何内容的基于类的组件，并且很乐意使用一些尚待标准化的ES语法，则可能需要执行以下操作：

render = () => null

这基本上是一种箭头方法，当前需要使用transform-class-properties Babel插件。React不会让您定义没有render功能的组件，这是满足我所想到的这一要求的最简洁的形式。

我目前正在从文档中借用的ScrollToTop变体中使用此技巧react-router。以我为例，该组件只有一个实例，并且不呈现任何内容，因此，简短形式的“ render null”非常适合。

我们可以这样返回

return <React.Fragment />;

在render（）函数中返回假值将不呈现任何内容。所以你可以做

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }