是否可以在反应渲染函数中返回空?
Posted
技术标签:
【中文标题】是否可以在反应渲染函数中返回空?【英文标题】:Is it possible to return empty in react render function? 【发布时间】:2017-06-24 07:17:11 【问题描述】:我有一个通知组件,我有一个超时设置。超时后我打电话给this.setState(isTimeout:true)
。
我想要做的是如果已经超时,我只想不渲染:
render()
let finalClasses = "" + (this.state.classes || "");
if (isTimeout)
return (); // here has some syntax error
return (<div>this.props.children</div>);
问题是:
返回(); // 这里有一些语法错误
【问题讨论】:
【参考方案1】:是的,你可以,但是如果你不想 render
来自组件的任何东西,而不是空白,只需返回 null
,就像这样:
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' />
【讨论】:
你为什么返回(null)而不是简单的null? @wedererreturn null
和 return (null)
没有区别,它们是一样的 :)
但是顺便说一句,你不能只是退出你的函数(这与返回未定义相同)。如果你没有任何return
,那么 React 会报错。所以return null
是必需的。【参考方案2】:
有些答案略有不正确,并指向文档的错误部分:
如果你想让一个组件什么都不渲染,只需要返回null
,就像doc一样:
在极少数情况下,您可能希望组件隐藏自己,即使它 由另一个组件渲染。为此,返回 null 而不是 它的渲染输出。
例如,如果您尝试返回undefined
,则会收到以下错误:
渲染没有返回任何内容。这通常意味着退货 声明丢失。或者,不渲染任何内容,返回 null。
正如其他答案所指出的那样,null
、true
、false
和 undefined
是有效的子级,对于条件渲染 inside 你的 jsx 很有用,但你想要你的组件不隐藏/渲染,只返回null
。
【讨论】:
【参考方案3】:是的,你可以从 React 渲染方法返回一个空值。
您可以返回以下任何内容:false, null, undefined, or true
根据docs:
false
、null
、undefined
和true
是有效的子级。他们 根本不渲染。
你可以写
return null; or
return false; or
return true; or
return <div>undefined</div>;
但是return null
是最首选的,因为它表示没有返回任何内容
【讨论】:
return undefined 是错误的。它会返回错误。而是返回 undefined 是正确的方法。 @jaydhawan return null 是推荐的方式。是的,return undefined 会出错,所以这个答案是有缺陷的。【参考方案4】:有点跑题了,但是如果你曾经需要一个从不渲染任何东西的基于类的组件,并且你很乐意使用一些尚未标准化的 ES 语法,你可能想去:
render = () => null
这基本上是一种箭头方法,目前需要transform-class-properties Babel 插件。 React 不会让你定义一个没有 render
函数的组件,这是我能想到的满足这个要求的最简洁的形式。
我目前在从react-router
文档借用的ScrollToTop 变体中使用此技巧。在我的例子中,只有一个组件实例并且它不渲染任何东西,所以“render null”的简短形式很适合在那里。
【讨论】:
代码已经写好了,但是我喜欢这种风格,看起来最简单的代码。【参考方案5】:如果您使用的是 Typescript,并且您的组件/函数的返回类型为 React.Element
,您将收到以下错误。
类型 'null' 不能分配给类型 'ReactElement'.
解决方案是React.Fragment
。
return <React.Fragment />
或
return <></>
【讨论】:
【参考方案6】:对于那些遇到这个问题的开发人员,他们会检查从哪里可以从组件返回 null,而不是检查三元模式来渲染或不渲染组件,答案是肯定的,你可以!
我的意思是在你的组件的渲染部分中,而不是你的 jsx 中的这种垃圾三元条件:
// some component body
return(
<section>
/* some ui */
someCondition && <MyComponent />
or
someCondition ? <MyComponent /> : null
/* more ui */
</section>
)
您可以检查组件内部的条件,例如:
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
变量(例如,请在您的脑海中考虑),并且我不需要在 MyComponent
内部钻取 someCondition
.
看看你的代码在这之后得到了多么清晰的视图,我的意思是你不需要在你的 JSX 中使用三元运算符,你的父组件如下所示:
// some component body
return(
<section>
/* some ui */
<MyComponent />
/* more ui */
</section>
)
MyComponent
会为您处理剩下的事情!
【讨论】:
【参考方案7】:我们可以这样返回,
return <React.Fragment />;
【讨论】:
这比返回null
好还是坏?
@bitstrider 使用 Fragment 而不是 null 触发只是内存丢失。
不知道为什么这个答案被否决,它明确显示了开发者的意图【参考方案8】:
在 render() 函数中返回虚假值将不会渲染任何内容。所以你可以这样做
render()
let finalClasses = "" + (this.state.classes || "");
return !isTimeout && <div>this.props.children</div>;
【讨论】:
以上是关于是否可以在反应渲染函数中返回空?的主要内容,如果未能解决你的问题,请参考以下文章