是否可以在反应渲染功能中返回空？

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（）; //这里有一些语法错误

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

Answer 2

有些答案略有不正确，并指向文档的错误部分：

如果你想要一个组件什么都不渲染，只需按照null返回doc：

在极少数情况下，您可能希望组件隐藏自身，即使它是由另一个组件呈现的。要执行此操作，请返回null而不是其渲染输出。

例如，如果您尝试返回undefined，则会收到以下错误：

渲染没有返回任何内容。这通常意味着缺少return语句。或者，为了不渲染，返回null。

正如其他答案所指出的那样，null，true，false和undefined都是有效的子元素，对于jsx中的条件渲染很有用，但是你希望你的组件隐藏/渲染任何东西，只需返回null。

Answer 3

是的，您可以从React渲染方法返回一个空值。

您可以返回以下任何内容：false, null, undefined, or true

根据docs：

false，null，undefined和true是有效的孩子。他们根本就不渲染。

你可以写

return null; or
return false; or
return true; or
return undefined; 

然而，return null是最受欢迎的，因为它表示没有任何返回

Answer 4

稍微偏离主题但是如果您需要一个永远不会呈现任何内容的基于类的组件，并且您很乐意使用一些尚未标准化的ES语法，那么您可能希望：

render = () => null

这基本上是一种箭头方法，目前需要transform-class-properties Babel插件。如果没有render函数，React将不允许你定义一个组件，这是我能想到的满足这个要求的最简洁的形式。

我正在使用ScrollToTop文件中借用的react-router变体中的这个技巧。在我的情况下，只有一个组件的实例，它不会渲染任何东西，所以一个简短的“渲染null”形式适合那里。

Answer 5

我们可以这样回来，

return <React.Fragment />;