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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个通知组件，并且有一个超时设置。超时后我打电话this.setState({isTimeout:true})。

我想做的是，如果已经超时，我什么都不渲染：

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

问题是：

回答：

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

return (null);

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

undefined, true。根据 ：

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

以上是 在react render函数中可以返回空吗？ 的全部内容， 来源链接： utcz.com/qa/431845.html

回到顶部