小编典典

在react render函数中可以返回空吗?

reactjs

我有一个通知组件,并且有一个超时设置。超时后我打电话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(); //这里有一些语法错误


阅读 1179

收藏
2020-07-22

共1个答案

小编典典

是的,您可以,但是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' />
2020-07-22