reactjs - 在react渲染函数中是否可以返回空？

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>);
}

问题是:

return (); // here has some syntax error

Answer 1

是的，您可以，但如果您不想从组件中渲染任何内容，只需返回null而不是空白，如下所示:

return (null);

<小时/>

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

booleans (true/false), null, and undefined are valid children, they will be Ignored means they simply don’t render.

所有这些 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' />