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

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

根据DOC:

condition=false是有效的孩子,他们将被忽略意味着他们根本不渲染.

所有这些false, null, undefined, true表达式将呈现相同的东西:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

例:

只会渲染奇数值,因为对于偶数值我们将返回booleans (true/false), null, and undefined.

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

如果您使用 Typescript 并且您的组件/函数具有返回类型React.Element，您将收到以下错误。

类型“null”不可分配给类型“ReactElement<any, string |” JSXElementConstructor>'.

解决办法是React.Fragment。

return <React.Fragment />

或者

return <></>

Answer 4

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

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

根据文件:

false,null,undefined,和true有效的儿童.他们根本就不渲染.

你可以写

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

但是return null最优先,因为它表示没有返回任何内容

Answer 5

有点跑题，但如果你需要一个从不渲染任何东西的基于类的组件，并且你很乐意使用一些尚未标准化的 ES 语法，你可能想要去：

render = () => null

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

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