在我们以前的一篇文章中，我们问过您是否建议根据
此 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部分：课程项目第6课。功能组件
→
原创在上一期实践课程中，我们讨论了以下事实：不必将所有构成HTML元素的JSX代码放在
ReactDOM.render()方法的参数中。 就我们而言，我们正在谈论的是项目符号列表，如下所述。
import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul> <li>1</li> <li>2</li> <li>3</li> </ul>, document.getElementById("root") )
想象一下您需要使用相同的方法来显示整个网页，其中包含数百个元素。 如果这样做，那么实际上将不可能正常维护此类代码。 当我们谈论React流行的原因时，其中之一就是它对该库中可重用组件的支持。 现在，我们将讨论如何创建功能性的React组件。
这些组件之所以称为“功能组件”，是因为它们是通过构造特殊功能来创建它们的。
创建一个新函数并将其命名为
MyApp ：
import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul> <li>1</li> <li>2</li> <li>3</li> </ul>, document.getElementById("root") )
正是由于在这里使用了构造函数的命名方案，才准确地命名了函数名。 它们的名称（实际上-组件的名称）以骆驼样式书写-它们组成的单词的第一个字母用大写字母制成，包括第一个单词的第一个字母。 对于此类功能，您应严格遵守此命名约定。
功能组件的布置非常简单。 即，在函数主体中应该有一个返回JSX代码的命令，该代码表示相应的组件。
在我们的示例中，获取项目符号代码并组织该代码从功能组件中返回就足够了。 可能是这样的：
function MyApp() { return <ul> <li>1</li> <li>2</li> <li>3</li> </ul> }
并且尽管在这种情况下一切都会按预期工作，也就是说，
return命令将返回所有这些代码，但建议在格式化程序代码时将此类构造括在括号中并应用React中采用的另一种约定。 它包括将各个元素放在单独的行上并相应地对齐它们。 由于应用了上述想法，我们功能组件的代码将如下所示：
function MyApp() { return ( <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ) }
通过这种方法，从组件返回的标记与常规HTML代码非常相似。
现在，在
ReactDOM.render()方法中，您可以通过将我们的功能组件实例作为第一个参数传递给该方法并将其封装在JSX标记中，来创建该实例。
import React from "react" import ReactDOM from "react-dom" function MyApp() { return ( <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )
您可能会注意到此处使用了自动关闭标签。 在某些情况下，当您需要创建结构更复杂的组件时，类似的设计会以不同的方式构建，但是现在，我们将仅使用这种自动关闭标签。
如果刷新由上述代码形成的页面，则其外观将与将项目符号列表的标记取出到功能组件中之前的外观相同。
功能组件返回的标记遵循将
ReactDOM.render()方法应用于第一个参数时所考虑的相同规则。 那就是-它不可能包含一个接一个的JSX元素。 尝试在上一个示例的
<ul>元素之后放置其他任何元素，例如-
<ol> ，将导致错误。 例如，您可以通过简单地将所有返回功能组件的内容包装在
<div>元素中来避免此问题。
也许您已经开始感觉到使用功能组件给我们带来了巨大的机遇。 特别是，我们正在谈论创建自己的包含JSX代码片段的组件，这是对出现在网页上的HTML标记的描述。 这样的组件可以布置在一起。
在我们的示例中，有一个显示简单HTML列表的组件，但是当我们创建越来越复杂的应用程序时，我们将开发显示我们创建的其他组件的组件。 结果，所有这些都将变成普通的HTML元素，但是有时，为了形成这些元素，您可能需要数十个自己的组件。
结果，当我们创建越来越多的组件时，我们会将它们放置在单独的文件中，但是对于您而言，掌握我们刚刚讨论的内容并习惯功能组件非常重要。 在课程中，您将创建越来越复杂的文件结构。
在本课程中，我们研究了功能组件的基础知识，接下来，我们将获得的知识应用到实践中。
第7课。 功能组件
→
原创▍工作
- 准备一个基本的React项目。
- 创建一个功能组件
MyInfo ，该组件构成以下HTML元素：
- 元素
<h1>和您的名字。 - 一段文字（
<p>元素），其中包含您的简短故事。 - 标有（
<ul> ）或编号（ <ol> ）的列表，其中包含要访问的三个地点的列表。
- 在网页上列出
MyInfo组件的实例。
▍其他任务
通过学习如何自己完成页面样式来对其进行样式化（搜索Google）。 应该注意的是，在本课程中，我们将更多地讨论样式化组件。
注意：可折叠块
▍解决方案
在这里，我们对之前使用的相同HTML页面感到满意。 带有React代码的文件看起来也很标准。 也就是说，我们将库导入其中，创建
MyInfo功能组件的框架并调用
ReactDOM对象的
render()方法，将要在页面上显示的组件以及指向该元素将显示在页面元素上的链接传递给它。 在此阶段，代码将如下所示：
import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root"))
现在，您需要从
MyInfo返回JSX代码，该代码会根据任务生成HTML标记。 这是完整的解决方案代码。
import React from "react" import ReactDOM from "react-dom" function MyInfo() { return ( <div> <h1>Bob Ziroll</h1> <p>This is a paragraph about me...</p> <ul> <li>Thailand</li> <li>Japan</li> <li>Nordic Countries</li> </ul> </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )
请注意，从
MyInfo返回的构造包含在括号中，并且要显示的元素在辅助
<div>元素内。
总结
在本文中，我们介绍了React的功能组件。 下次，我们将讨论组件文件和React项目的结构。
亲爱的读者们！ 如果您参加本课程，请告诉我们您进行练习的环境。