在 React 组件的渲染函数中设置条件表达式
介绍
React 框架是一个 JavaScript 视图库，可让您将 Web 应用组件化。React 消除了直接处理浏览器文档对象模型 (DOM) 的大部分复杂性，让您可以更加专注于手头的业务问题。
如果您曾尝试直接访问 DOM 以有条件地更改视图，那么您就会知道这有多么麻烦。忽略 HTML 的条件渲染几乎是不可能的。在使用 React（或任何 Web 框架）时，几乎可以肯定的是，您需要根据应用当前所处的状态有条件地渲染 HTML。
幸运的是，React 通过render生命周期方法提供了一种强大的方法，可以在其组件内有条件地渲染 HTML。在本指南中，您将了解render生命周期方法以及如何利用 JSX 的强大功能通过条件表达式渲染视图。
让我们开始吧！
渲染函数概述
render生命周期方法是 React 类组件中唯一绝对必需的方法。这是因为 React 组件的整个目的首先是“渲染”HTML。这个必需函数通常接受组件的 props 和/或状态，并渲染依赖于这些数据的 HTML。render 函数与JSX 表达式结合使用，提供了一种强大且声明性的方式来表达应用程序的视图层。有关 JSX 的更多信息，以及为什么要将其与 React 一起使用，请查看 React 的 JSX文档。
通常，类组件中渲染函数的使用如下所示：
class PetList Extends React.Component {
...
render() {
return (
<ul>
{ this.props.cats.map(cat => {
return (<Cat name={cat.name} type={cat.type} />)
})}
</ul>
<ul>
{ this.props.dogs.map(dog => {
return (<Dog name={dog.name} type={dog.type} />)
})}
</ul>
)
}
}
上面的render函数从父组件中获取猫和狗的列表，并为它们渲染一个 HTML 无序列表。如您所见，render函数与 JSX 配合使用，使 HTML 声明变得简单而动态。但是，如果您只想根据用户的操作显示其中一个列表，该怎么办？这就是 JSX 条件表达式的强大之处。
条件渲染
使用 JSX，条件渲染变得轻而易举！条件渲染的强大功能得益于 JSX 的灵活性，它允许您将 HTML 分配给 JavaScript 变量。是的，没错——喜欢还是讨厌，您都可以同时使用 HTML 和 JavaScript。在下面的代码中，您将看到条件表达式如何允许您根据应用程序状态渲染宠物列表或狗列表。
class PetList Extends React.Component {
...
render() {
const catList = this.props.cats.map(cat => <Cat name={cat.name} type={cat.type} />);
const dogList = this.props.dogs.map(dog => <Dog name={dog.name} type={dog.type} />);
const petList = this.props.isShowingDogList ? dogList : catList;
return (
<ul>{petList}</ul>
)
}
}
这很简单！上面的render函数根据isShowingDogList布尔属性渲染Dog组件列表或Cat组件列表。如您所见，通过render生命周期方法和 JSX 的强大功能，React 允许您轻松声明 HTML 的条件状态。
注意：上述代码仅为演示，可以进行优化，以在 cats 或 dogs 之间调用Array.map，而不是始终在两个数组之间进行映射。
结论
React 组件的render函数是一种强大的生命周期方法。除了显示静态 HTML 之外，render函数还允许您根据条件表达式动态渲染 HTML。render 函数的功能远不止条件表达式！有关此重要且必需的生命周期方法的更多信息，请查看 React render 文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~