我们将发布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部分：课程项目第9课。父级和子级组件
→
原创今天我们将讨论父级和子级组件。 与在DOM中仅输出一个组件（例如
MyInfo相比，使用此类构造会使我们的应用程序更加复杂。 代替这种简单的结构，应用程序可能具有复杂的组件层次结构，结果，这些组件被转换为JSX元素。
让我们从您已经知道的应用程序模板开始。 为了回顾您所
index.js ，您可以从内存中在空的
index.js文件中编写代码，以显示带有文本
Hello World!的第一级标题页
Hello World! 反应工具。 代码如下所示：
import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") )
上一次，在上面的代码中
<h1>元素的描述，这里有代码显示
MyInfo组件。 现在，我们将创建并显示
App组件。 为此，我们需要以下形式的代码：
import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") )
App组件将成为我们应用程序的入口点。 您可能已经注意到上一个示例的代码中缺少某些内容。 的确如此-我们尚未在此处导入该
App 。 让我们做吧：
import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
但是这样的代码仍然不起作用。 我们需要
App组件文件（
App.js ）与
index.js位于同一文件夹中。 这是我们在导入命令
import App from "./App"引用的文件。 回想一下，React组件的名称以驼峰样式编写，并以大写字母开头。 创建我们需要的文件，并在其中描述
App组件。 尝试自己做。 即，编写代码使
App组件
Hello again在页面上显示
Hello again 。
这段代码如下所示：
import React from "react" function App(){ return ( <h1>Hello again</h1> ) } export default App
在这里，
App函数返回单个元素，但是请记住，可以从相似的函数返回更复杂的结构。 最重要的是不要忘记您只能返回一个元素，而实际上，如果您需要显示多个元素，则该元素就是包含这些元素的容器。 例如，下面是描述第一级标题和项目符号列表的标记返回结果：
import React from "react" function App(){ return ( <div> <h1>Hello a third time!</h1> <ul> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> </ul> </div> ) } export default App
也许现在我们将决定通过
App组件形成的内容应该是一个网站。 它将具有一个导航块（
<nav></nav> ）和一个主要内容区域（
<main></main> ）。 该解决方案将导致以下代码的形成：
import React from "react" function App(){ return ( <div> <nav> <h1>Hello a third time!</h1> <ul> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> </ul> </nav> <main> <p>This is where most of my content will go...</p> </main> </div> ) } export default App
这就是它在浏览器中的外观。
浏览器中的应用您仍可以在此处对列表进行样式化，使其变得更像导航栏。
您可能会注意到组件代码已经变得很大。 这违背了我们使用React的目的。 前面我们谈到过这样一个事实，HTML代码片段可以表示为单独的组件，并且在我们的组件中，所有内容都堆积在一个堆中。 因此，现在我们将为标记的每个独立片段创建组件。
请看一下该图，以更好地了解要害所在。
App组件显示MyInfo组件，即<div>元素的输出在这里，我们在页面上显示
App组件。 在这种情况下，
App组件决定显示另一个组件
MyInfo 。
MyInfo组件已经显示了某个JSX元素。 注意“组件”和“元素”概念之间的区别。 元素是变成常规HTML代码的实体。 因此，在图底部显示的元素中，使用了一个简单的
<div>标签，其名称以小写字母开头，这告诉我们这是一个普通元素，而不是我们创建的组件之一。 另一方面，名称
MyInfo以大写字母开头。 这有助于了解我们有一个组成部分。
您可能已经听说过DOM（文档对象模型，通常称为“树”）。 该树的根元素是
<html>元素。 在我们的例子中，图中表示的树的根元素是
App组件。 该组件的功能不限于另一个组件（在本例中为
MyInfo的输出。 例如，它可以在页面底部显示另一个组件，即“页脚”。 假设此组件将称为
AwesomeFooter 。
组件App输出两个组件反过来，此组件可以输出
<footer>元素，该元素将在页面底部包含HTML代码。
如果我们有页面的“页脚”，那么它也可以包含“页眉”，该页眉形成其上部。
组件应用输出三个组件页面的顶部在我们的图中由
AwesomeHeader组件表示。 为了避免将它们与元素混淆，将这些名称赋予这些组件。 与
App组件一样，
AwesomeHeader组件不仅可以输出JSX标记，还可以输出其他组件。 例如，它可以是
NavBar组件（是导航栏），也可以是显示徽标的
Logo组件。 这些组件将已经显示普通元素-例如
<img />和
<nav> 。
在查看该方案时，您可能会注意到，随着React应用程序的开发，它可能会变得越来越复杂。 实际上，我们在这里检查的是一个非常简单的应用程序结构的示例。
现在，让我们在培训应用程序中创建一个组件，该组件将成为页面的“页脚”。
为此，请在与
index.js文件相同的文件夹中创建一个新文件。
Footer.js其
Footer.js并将以下代码放入其中：
import React from "react" function Footer() { return ( <footer> <h3><font color="#3AC1EF">▍This is my footer element</font></h3> </footer> ) } export default Footer
请注意，功能组件的名称以大写字母（
Footer ）开头，元素的名称
(<footer> ）以小写字母开头。 如前所述，这有助于将元素与组件区分开。
如果现在刷新页面，则由
Footer组件生成的标记将不会显示在其下部。 这是完全可以预期的，因为要显示它，您需要对
App组件的代码进行适当的更改。
即，我们正在谈论的事实是，在
App组件的文件的代码中，您需要导入
Footer组件并创建它的实例。 编辑
App.js文件的代码：
import React from "react" import Footer from "./Footer" function App(){ return ( <div> <nav> <h1>Hello a third time!</h1> <ul> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> </ul> </nav> <main> <p>This is where most of my content will go...</p> </main> <Footer /> </div> ) } export default App
现在，应用程序形成的页面将如下所示。
App组件在页面底部显示由另一个组件形成的标记-页脚您可能会注意到，现在在
App组件输出的代码中，普通的JSX元素与组件混合在一起。 如果
App组件显示的内容像书中的目录一样好，因此它主要包含组件，那会更好。 也就是说，关键是组件代码将如下所示：
import React from "react" import Footer from "./Footer" function App() { return ( <div> <Header /> <MainContent /> <Footer /> </div> ) } export default App
如果应用程序具有类似的结构（在我们的示例中，由于尚未创建
Header和
MainContent组件文件，则代码将无法正常工作），则构成页面各部分的元素的描述将在相应组件的文件中。 同时，导入到
App组件中的组件可能包含其他嵌套组件。 因此可以形成相当广泛的结构，其尺寸由特定应用程序的需求决定。
在这里，我们讨论了如何使用嵌套组件。 您可以通过使该项目（其
App.js文件如下所示）进入工作状态，来很好地尝试实践刚刚学到的东西。
第10课。 父子组件
→
原创▍工作
从头开始构建一个React应用程序。 在页面上显示
App的根组件（在单独的文件中定义）。 在此组件内打印以下组件：
NavbarMainContentFooter
App显示的组件应在单独的文件中描述，每个组件都应输出一些JSX元素。
▍解决方案
作为解决此问题的基础，使用了使用
create-react-app工具
create-react-app的标准项目（如果您不知道如何创建这样的项目，请查看
此材料）。 它使用标准
index.html 。
index.js文件的代码
index.js ：
import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
这是
App.js文件的代码。 请注意，我们将使用
components文件夹来存储组件文件。
import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() { return ( <div> <Header /> <MainContent /> <Footer /> </div> ) } export default App
Header.js文件的代码
Header.js ：
import React from "react" function Header() { return ( <header>This is the header</header> ) } export default Header
MainContent.js文件
MainContent.js ：
import React from "react" function MainContent() { return ( <main>This is the main section</main> ) } export default MainContent
文件
Footer.js代码：
import React from "react" function Footer() { return ( <footer>This is the footer</footer> ) } export default Footer
您可以根据需要组织组件的工作。 也就是说，例如，您可以首先在
App.js文件中编写所有必需的代码，以导入组件并显示其实例，然后创建组件文件。 您可以执行相反的操作-首先使用代码创建组件文件，然后使用
App.js文件。 最重要的是，您最终得到了一个可以正常工作的应用程序。
这就是该项目在VSCode中的样子。
VSCode中的项目这是此应用程序形成的页面。
浏览器中的应用程序页面我们的React应用程序可以工作，但是它在页面上显示的内容看起来完全没有意思。 您可以通过设置页面内容的样式来解决此问题。
总结
今天我们讨论了父级和子级组件。 下次，我们将开始第一个大型培训项目，并讨论样式页面元素。
亲爱的读者们！ 如果您参加本课程，请告诉我们您如何进行实际练习。 即-您是编写“从头开始”的代码，还是看上一课的内容？ 或者，也许您正在尝试查找您在Internet上忘记的内容？
