是否有可能在react渲染函数中返回空?

我有一个通知组件，我有一个超时设置。超时后，我调用this.setState({isTimeout:true})。

我想做的是，如果已经超时，我只想渲染什么:

render() {
  let finalClasses = "" + (this.state.classes || "");
  if (isTimeout){
    return (); // here has some syntax error
  }
  return (<div>{this.props.children}</div>);
}

问题是:

返回();//这里有一些语法错误

当前回答

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

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

根据文件:

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

你可以这样写

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

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

2017-02-07 06:33:10

其他回答

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

render = () => null

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

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

2018-06-25 22:00:06

是的，你可以，但不是空白，如果你不想从组件中呈现任何东西，只需返回null，就像这样:

return (null);

另一个重点是，在JSX中，如果你是有条件地呈现元素，那么在condition=false的情况下，你可以返回这些值中的任何一个false, null, undefined, true。根据DOC:

布尔值(true/false)、null和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' />

2017-02-07 06:36:44

如果你正在使用Typescript并且你的组件/函数有返回类型React。元素时，您将得到以下错误。

类型“null”不能分配给类型“ReactElement<any，字符串|” JSXElementConstructor >”。

解决方案是React.Fragment。