今天，我们将发布React培训课程的继续。 在这里，我们将讨论该课程的某些功能，尤其是有关代码样式的功能。 在这里，我们更详细地讨论JSX和JavaScript之间的关系。
→
第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部分：课程项目第13课：关于本课程的某些功能
→
原创在继续之前，我想谈谈我在本课程中演示的一些代码功能。 您可能已经注意到，代码中通常不使用分号。 例如，如您所见，在以下示例中，它们不是：
import React from "react" import ReactDOM from "react-dom" function App() { return ( <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root"))
您可能会习惯于使用分号。 然后，例如，上一个代码片段的前两行如下所示：
import React from "react"; import ReactDOM from "react-dom";
我最近决定不使用它们，结果得到了您在示例中看到的代码。 当然，JavaScript中有不能没有分号的构造。 说，当描述一个
for循环时，其语法如下所示：
for ([]; []; [ ])
但是在大多数情况下，您可以在行尾不用分号。 而且他们在代码中的缺席不会干扰其工作。 实际上，在代码中使用分号的问题是程序员的个人喜好问题。
我正在编写的代码的另一个功能是，尽管从技术上讲ES6允许您在使用
function关键字声明函数的情况下使用箭头函数，但我不使用它。
例如，上面的代码可以这样重写：
import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root"))
但是我不习惯。 我相信箭头功能在某些情况下非常有用，在某些情况下，这些功能的功能不会干扰代码的正确操作。 例如，当他们通常使用匿名函数或编写类方法时。 但是我更喜欢使用传统功能。 许多功能在描述功能组件时都使用箭头功能。 我同意这种方法比使用传统设计具有优势。 同时，我不打算强加任何声明功能组件的特定方式。
第14课。JSX和JavaScript
→
原创在下一课中，我们将讨论内置样式。 在继续讨论这些主题之前，我们需要弄清楚JavaScript和JSX之间交互的一些功能。 您已经知道，使用React的功能，我们可以从普通的JavaScript代码中返回类似于普通HTML标记但为JSX代码的构造。 例如，这发生在功能组件代码中。
如果某个变量的值需要替换为功能组件返回的JSX代码怎么办？
假设我们有这样的代码：
import React from "react" import ReactDOM from "react-dom" function App() { return ( <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root"))
在功能组件中添加几个变量，其中包含用户的名字和姓氏。
function App() { const firstName = "Bob" const lastName = "Ziroll" return ( <h1>Hello world!</h1> ) }
现在，我们希望功能组件返回的不是文本
Hello world!的第一级标题
Hello world! ，以及包含问候语的标题，例如
Hello Bob Ziroll! 它是使用组件中可用的变量形成的。
让我们尝试重写组件返回的内容，如下所示：
<h1>Hello firstName + " " + lastName!</h1>
如果您在处理了这样的代码后查看页面上显示的内容，结果发现它看起来不像我们需要的那样。 即，文本
Hello firstName + " " + lastName! 。 同时，如果使用由
create-react-app工具
create-react-app的标准项目来运行示例，则将警告我们，常量
firstName和
lastName分配了在任何地方都不会使用的值。 的确，这不会阻止文本在页面上的出现，而该文本正是功能组件所返回的内容，而不是替换变量名及其值，而不是变量名。 系统认为此格式的变量名称为纯文本。
我们将询问如何在JSX代码中利用JavaScript。 实际上，这样做非常简单。 就我们而言，将大括号中应解释为JavaScript代码的内容括起来就足够了。 结果，组件返回的内容将如下所示：
<h1>Hello {firstName + " " + lastName}!</h1>
同时，文字
Hello Bob Ziroll! 。 您可以在这些JSX代码段中使用常规的JavaScript结构，并用花括号突出显示。 这是代码将在浏览器中输出的内容：
由JSX和JavaScript生成的带有标记的页面由于在现代条件下使用字符串时，主要使用ES6功能，因此我们使用它们重写了代码。 也就是说，我们正在谈论使用反引号（
` ` ）绘制的
模板文字 。 这样的字符串可能包含
${}形式的构造。 模板文字的标准行为涉及计算花括号中包含的表达式，并将字符串中发生的事情转换为字符串。 在我们的情况下，它将如下所示：
<h1>Hello {`${firstName} ${lastName}`}!</h1>
请注意，名字和姓氏之间用空格分隔，此处将其解释为常规字符。 执行该代码的结果将与上面显示的相同。 通常，您现在应该了解的最重要的事情是，位于JSX代码中的花括号中包含的是普通JS。
考虑另一个例子。 即，我们重写代码，以便如果在早晨调用它，它将显示文本
Good morning ，如果在下午-
Good afternoon ，如果在晚上-
Good night 。 首先，我们将编写一个报告时间的程序。 这是解决此问题的
App功能组件的代码：
function App() { const date = new Date() return ( <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) }
在这里创建
Date对象的新实例。 JSX使用JavaScript代码，因此，我们可以通过调用
date.getHours()方法（现在是一个小时
date.getHours()来找出该代码，然后计算该数字除以
12的余数，将时间转换为12小时格式。 以类似的方式，通过检查时间，我们可以形成所需的线。 例如，它可能看起来像这样：
function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay}!</h1> ) }
有一个变量
timeOfDay ，并使用
if构造分析当前时间，我们找出一天中的时间并将其写入此变量。 之后，我们在JSX代码返回的组件中使用变量。
与往常一样，建议您尝试一下我们今天学到的知识。
总结
在本课程中，我们讨论了本课程中使用的一些代码样式功能，以及JSX和JavaScript的交互。 在JSX中使用JavaScript代码会带来很多机会，在下一课中我们将处理内置样式时，我们将体会到实用性。
亲爱的读者们！ 您在JavaScript代码中使用分号了吗？
