是否可以在react render函数中返回空？

作者

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

我要做的是，如果已经超时，我只想不渲染任何内容：

render（）{
设finalClasses=“this.state.classes”=“this.state.classes”；
如果（isTimeout）{
return（）；//这里有一些语法错误
}
返回（&lt；div&gt；{this.props.children}&lt；/div&gt；）；
}

问题是：

return（）；//这里有一些语法错误

可以，但如果您不想呈现组件中的任何内容，只需返回null，而不是空白，如下所示：

返回值（null）；

另一个要点是，在JSX内部，如果您有条件地呈现元素，那么在条件=false的情况下，您可以返回这些值中的任意一个false、null、undefined、true。根据文件：

布尔值（真/假）、null和未定义的是有效的子项，
它们将被忽略，这意味着它们根本不渲染

所有这些JSX表达式将呈现为相同的内容：

&lt；div/&gt；
&lt；部门&gt&lt/部门&gt；
&lt；部门&gt；{false}&lt/部门&gt；
&lt；部门&gt；{null}&lt/部门&gt；
&lt；部门&gt；{未定义}&lt/部门&gt；
&lt；部门&gt；{true}&lt/部门&gt；

示例：

只渲染奇数值，因为对于偶数值，我们将返回null

const-App=（{number}）=&gt；{
如果（编号%2）{
返回(
&lt；div&gt；
编号：{Number}
&lt；/div&gt；
)
}
return（null）；//=&gt；注意这里，偶数值返回null
}
常数数据=[1,2,3,4,5,6]；
ReactDOM.render(
&lt；div&gt；
{data.map（el=&gt；&lt；App key={el}number={el}/&gt；）}
&lt；/div&gt；，
document.getElementById（'app'）
)
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js“&gt&lt/脚本&gt；
&lt；div id='app'/&gt

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with