是否有可能在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>);
}

问题是:

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

212324 次浏览
小开

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

你可以返回下列任意值:false, null, undefined, or true

根据文档:

false， null， undefined和true是有效的子元素。他们

你可以这样写

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

然而，return null是最受欢迎的，因为它表示没有返回任何东西

小开
最佳答案

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

return (null);

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

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' />

小开

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

render = () => null

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

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

小开

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

如果你想让一个组件不呈现任何东西，只需要返回null，就像医生一样:

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

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

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

正如其他答案所指出的，null， true， false和undefined是有效的子元素，这对于条件渲染内部 your jsx很有用，但如果你想让你的组件隐藏/渲染任何东西，只需要返回null。

EDIT React 18:

React 18将允许渲染undefined而不是抛出。请看这个公告。

小开

我们可以这样返回，

return <React.Fragment />;
小开

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

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

对于那些提出这个问题的开发人员，他们可以检查在组件中哪里可以返回null，而不是在三元模式下检查是否渲染组件，答案是肯定的，你可以!

我的意思是，在你的JSX中渲染你的组件的部分，而不是这个垃圾三元条件:

// some component body
return(
<section>
{/* some ui */}
   

{ someCondition && <MyComponent /> }
or
{ someCondition ? <MyComponent /> : null }


{/* more ui */}
</section>
)

你可以检查你的组件中的than条件，像这样:

const MyComponent:React.FC = () => {
  

// get someCondition from context at here before any thing




if(someCondition) return null; // i mean this part , checking inside component!
  

return (
<section>
// some ui...
</section>
)
}

只要考虑在我的情况下，我提供了someCondition变量的上下文在上层组件(例如，只是在你的脑海中考虑)，我不需要支撑钻someCondition在MyComponent。

看看你的代码在那之后得到了多么干净的视图，我的意思是你不需要在你的JSX内部使用三元操作符，你的父组件会像下面这样:

// some component body
return(
<section>
{/* some ui */}
   

<MyComponent />


{/* more ui */}
</section>
)

MyComponent会为你处理剩下的!

小开

如果你正在使用Typescript并且你的组件/函数有返回类型React.Element，你会得到以下错误。

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

解决方案是React.Fragment。

return <React.Fragment />

或

return <></>

提交答案