提问者:小点点

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

问题是:

返回();//这里有一些语法错误


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