今天，在React培训课程的下一部分的翻译中，我们提请您注意有关条件渲染的第二课和关于该主题的研讨会。
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目课37.条件渲染，第2部分
→
原创在今天的条件渲染教程中，我们将讨论使用逻辑运算符
&& （And）。 我们将试验由create-react-app创建的标准项目，该项目位于以下代码的
App.js文件中：
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { unreadMessages: [ "Call your mom!", "New spam email available. All links are definitely safe to click." ] } } render() { return ( <div> <h2>You have {this.state.unreadMessages.length} unread messages!</h2> </div> ) } } export default App
现在，该应用程序将在浏览器中显示，如下所示。
浏览器中的应用程序页面您可能已经在诸如
true && false （给出
false ）的构造中使用了
&&运算符。 为了使
true表达式作为计算该表达式的结果而返回，它应该看起来像
true && true 。 处理此类表达式时，JavaScript确定它们的左侧是否为真，如果是，则仅返回其右侧的真。 如果处理形式为
false && false的表达式，则将立即返回
false ，而无需检查表达式的右侧。 结果，
&&运算符可以在条件渲染中使用。 有了它，您可以返回将在屏幕上显示的内容，也可以不返回任何内容。
让我们分析培训应用程序的代码。
App组件的状态存储一个
unreadMessages字符串数组。 此数组中的每一行代表未读的消息。 该页面显示未读消息的数量，该数量取决于阵列的长度。 如果此数组为空，即其中没有单个元素，则应用程序将显示页面下方显示的内容。
该应用程序通知我们没有未读消息为了实现此效果，将数组转换为以下形式就足够了：
unreadMessages: [] 。
如果没有未读消息，则完全有可能根本不显示任何消息。 如果使用
上次谈到的三元运算符来实现应用程序的此行为，则可以将
App组件的
render()方法重写为：
render() { return ( <div> { this.state.unreadMessages.length > 0 ? <h2>You have {this.state.unreadMessages.length} unread messages!</h2> : null } </div> ) }
现在，如果
unreadMessages数组
unreadMessages空，则页面上将不会显示任何内容。 但是，可以使用
&&运算符简化此处介绍的代码。 外观如下：
render() { return ( <div> { this.state.unreadMessages.length > 0 && <h2>You have {this.state.unreadMessages.length} unread messages!</h2> } </div> ) }
如果数组中有内容，则表达式的右侧显示在页面上。 如果数组为空，则页面上不显示任何内容。
这并不是说在条件渲染中使用
&&运算符是绝对必要的，因为使用三元运算符可以实现相同的效果，如果所测试的条件为false，则该运算符将返回
null 。 但是这里介绍的方法简化了代码，此外，它还经常使用，因此您在阅读别人的程序时可能会遇到它。
课38.讲习班。 条件渲染
→
原创▍工作
这是
App功能组件的代码，存储在使用create-react-app创建的标准项目的
App.js文件中。
import React from "react" function App() { return ( <div> Code goes here </div> ) } export default App
您需要执行以下操作：
- 转换组件代码以使其具有状态。
- 确保组件的状态包含有关用户是否“登录”的信息（在本练习中，“登录”到系统并“注销”意味着仅更改状态中存储的相应值）。
- 在该组件的页面上添加一个按钮，该按钮允许用户登录和注销。
- 这是一项附加任务。 确保如果用户未登录，该按钮将显示
LOG IN ，如果已登录，则显示LOG OUT 。
- 在由组件组成的页面上
Logged in如果用户已登录，则Logged in如果Logged in则Logged in “已注销”。
如果现在您觉得很难开始解决这些问题，请查看提示，然后开始工作。
▍提示
要完成此任务，您需要回顾我们在之前的课程中谈到的许多内容。 首先，可以具有状态的组件必须是基于类的组件。 该组件必须具有构造函数。 在组件的状态下，您可以存储逻辑属性，例如，可以将其称为
isLoggedIn ，其值
true或
false指示用户是否登录。 为了使需要添加到应用程序生成的页面上的按钮能够执行其功能，它将需要一个
onClick事件
onClick 。 为了显示不同的文本，基于状态的变化值，有必要采用条件渲染技术。
▍解决方案
我们将代码中可用的功能组件转换为基于类的组件。 我们出于几个原因需要它。 首先，我们需要处理应用程序的状态。 其次，我们需要一个事件处理程序，该事件处理程序在单击按钮时被调用。 原则上，您可以编写一个独立的函数并将其用于处理按钮事件，但是我更喜欢在组件类中描述处理程序。
这是将功能组件转换为基于类的组件的代码的样子。 在这里，我们在组件构造函数中描述其初始状态，该状态包含将
isLoggedIn属性设置为
false 。
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } } render() { return ( <div> Code goes here </div> ) } } export default App
上面的代码是任务的第一部分和第二部分的解决方案。 现在，我们将向组件显示的页面添加按钮。 到目前为止，无论应用程序状态中存储了什么内容，此按钮都将显示相同的题词。 我们将为其配备事件处理程序，以将其放入其中，以检查代码的可操作性，这是一个向控制台输出消息的简单命令。 另外，在组件构造函数中，我们会将此处理程序绑定到
this ，这对于我们在此处理程序的代码中引用旨在与组件状态一起使用的机制时非常有用。 现在，代码如下所示。
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { console.log("I'm working!") } render() { return ( <div> <button onClick={this.handleClick}>LOG IN</button> </div> ) } } export default App
当您单击“
LOG IN按钮时，
I'm working! 。
现在回想一下，我们需要
isLoggedIn按钮时，存储在状态中的
isLoggedIn属性从
true变为
false ，反之亦然。 为此，在按钮单击处理程序中，您将需要调用
this.setState()函数，该函数可以通过两种方式使用。 即，可以以对象的形式提供关于状态中应该包含什么的新思想。 它使用的第二种变体涉及向其传递一个函数，该函数采用组件的先前状态并形成一个新的状态，并再次返回该对象。 我们将这样做。 这就是我们在工作的现阶段所得到的。
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { return ( <div> <button onClick={this.handleClick}>LOG IN</button> </div> ) } } export default App
在这里，我们可以使用if-else构造，但是我们只是使用逻辑运算符将
true转换为
false并将
false转换为
true ! （不）。
到目前为止，我们还没有一种机制可以根据状态中存储的内容来影响应用程序的外观。 因此，现在我们将解决任务编号3的其他任务。 即，我们将根据组件的状态更改按钮上的标签。 为此，您可以在
render()方法中声明一个变量，其值
LOG IN或
LOG OUT取决于状态中存储的内容。 然后可以将此值用作按钮文本。 这是它的外观。
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN" return ( <div> <button onClick={this.handleClick}>{buttonText}</button> </div> ) } } export default App
现在，让我们来看作业的第四部分。 我们将在页面上显示文本，具体取决于用户是否登录。 实际上，考虑到组件代码中已经存在的所有内容，解决此问题非常简单。 以下是
App.js文件的完成代码。
import React from "react" class App extends React.Component { constructor() { super() this.state = { isLoggedIn: false } this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState(prevState => { return { isLoggedIn: !prevState.isLoggedIn } }) } render() { let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN" let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out" return ( <div> <button onClick={this.handleClick}>{buttonText}</button> <h1>{displayText}</h1> </div> ) } } export default App
这就是应用程序在浏览器中的外观。
浏览器中的应用程序页面单击上图所示的“
LOG IN按钮
LOG IN应用程序状态，此后在该按钮上显示“
LOG OUT ”，并在页面上显示文本，通知用户已登录。
总结
今天，我们继续讨论条件渲染，研究了
&&运算符的使用，并完成了涉及我们研究的许多机制的实际任务。 下次，您将继续处理Todo应用程序和一个新主题。
亲爱的读者们！ 您应付今天的实际任务了吗？