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

我有一个通知组件,并且有一个超时设置。超时后我打电话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(); //这里有一些语法错误

Harry泡芙2020/03/12 10:20:50

一些答案有些不正确,指向文档的错误部分:

如果您想让组件什么都不呈现null,则按照doc返回

在极少数情况下,您可能希望某个组件隐藏自身,即使该组件是由另一个组件渲染的也是如此。为此,返回null而不是其渲染输出。

undefined例如,如果尝试返回,则会出现以下错误:

渲染未返回任何内容。这通常意味着缺少return语句。或者,不渲染任何内容,则返回null。

正如其他的答案中指出,nulltruefalseundefined有效孩子这是有条件的渲染有用里面你的JSX,但你希望你的组件隐藏/渲染什么,只是返回null

小胖Eva2020/03/12 10:20:50

有点偏离主题,但是如果您需要一个永远不会呈现任何内容的基于类的组件,并且很乐意使用一些尚待标准化的ES语法,则可能需要执行以下操作:

render = () => null

这基本上是一种箭头方法,当前需要使用transform-class-properties Babel插件。React不会让您定义没有render功能的组件,这是满足我所想到的这一要求的最简洁的形式。

我目前正在文档中借用ScrollToTop变体中使用此技巧react-router以我为例,该组件只有一个实例,并且不呈现任何内容,因此,简短形式的“ render null”非常适合。

达蒙西里2020/03/12 10:20:50

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

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

根据文档

falsenullundefined,和true有效的儿童。他们只是不渲染。

你可以写

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

但是return null,最优选的是,它表示不返回任何内容

逆天西里2020/03/12 10:20:50

我们可以这样返回

return <React.Fragment />;
Eva前端2020/03/12 10:20:49

在render()函数中返回假值将不呈现任何内容。所以你可以做

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