我有一个通知组件,我有一个超时设置。超时后,我调用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,就像每个doc:

在极少数情况下,您可能希望组件隐藏自己 由另一个组件呈现。要做到这一点,返回null而不是 它的渲染输出。

例如,如果你试图返回undefined,你会得到以下错误:

渲染没有返回任何东西。这通常意味着回报 语句缺失。或者,为了不呈现任何内容,返回null。

正如其他答案所指出的,null, true, false和undefined都是有效的子元素,这对于jsx中的条件渲染非常有用,但如果你想让你的组件隐藏/渲染任何东西,就返回null。

EDIT React 18:

React 18将允许未定义的渲染而不是抛出。请看这个公告。

其他回答

稍微偏离主题,但如果你曾经需要一个从不呈现任何东西的基于类的组件,并且你很乐意使用一些尚未标准化的ES语法,你可能想去:

render = () => null

这基本上是一个箭头方法,目前需要transform-class-properties Babel插件。React不允许你在没有渲染函数的情况下定义组件,这是我能想到的满足这一要求的最简洁的形式。

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

是的,你可以从React渲染方法中返回一个空值。

您可以返回下列任意值:false、null、undefined或true

根据文件:

False、null、undefined和true是有效的子元素。他们 不要渲染。

你可以这样写

return null; or
return false; or
return true; or
return <div>{undefined}</div>; 

然而,return null是最可取的,因为它表示不返回任何东西

在render()函数中返回假值将不会呈现任何东西。所以你可以这样做

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }

有些答案是稍微不正确的,并且指向了文档的错误部分:

如果你想让一个组件什么都不呈现,只需要返回null,就像每个doc:

在极少数情况下,您可能希望组件隐藏自己 由另一个组件呈现。要做到这一点,返回null而不是 它的渲染输出。

例如,如果你试图返回undefined,你会得到以下错误:

渲染没有返回任何东西。这通常意味着回报 语句缺失。或者,为了不呈现任何内容,返回null。

正如其他答案所指出的,null, true, false和undefined都是有效的子元素,这对于jsx中的条件渲染非常有用,但如果你想让你的组件隐藏/渲染任何东西,就返回null。

EDIT React 18:

React 18将允许未定义的渲染而不是抛出。请看这个公告。

我们可以这样返回,

return <React.Fragment />;