在react render函数中是否可以返回空函数？

Question

我有一个通知组件，我有一个超时设置。超时后，我调用This.SetState（{IsTimeout:True}）。

我想做的是，如果已经超时，我想只呈现任何内容：

render() {
  let finalClasses = "" + (this.state.classes || "");
  if (isTimeout){
    return (); // here has some syntax error
  }
  return (<div>{this.props.children}</div>);
}

问题是：

返回（）；//这里有一些语法错误

Answer 1

可以，但如果您不想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' />