是否可以在反应渲染函数中返回空？

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

问题是：

返回 （）; // 这里有一些语法错误

原文由 Xin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，你可以，但不是空白，而是简单地返回 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' />

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

如果您希望组件不呈现任何内容，只需根据 文档 返回 null ：

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

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

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

As pointed out by other answers, null , true , false and undefined are valid children which is useful for conditional rendering inside your jsx ，但如果您希望您的组件不隐藏/渲染任何内容，只需返回 null 。

编辑反应 18：

React 18 将允许渲染 undefined 而不是抛出。见此 公告。

原文由 jhujhul 发布，翻译遵循 CC BY-SA 4.0 许可协议