我们正在发布的React培训课程中的今天课程专门致力于继续研究TODO应用程序和组件属性。
→
第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部分：课程项目第16课。 TODO应用程序。 阶段数2
→
原创▍工作
- 在上一讲习班之后 ，您创建了一个React应用程序，该
App程序的App组件显示一组成对的元素-标志（元素<input type="checkbox" /> ）及其描述（元素<p> </p> ）。 将这个集合的元素设计为单独的组件- <TodoItem />并使用它在App组件中创建一个列表。 同时，不要关注该列表的所有元素看起来都一样的事实（以后我们将讨论如何用不同的数据填充它们）。 - 使用CSS文件，内联样式或针对React应用程序的这些样式方法的组合来对页面进行样式化。
▍解决方案
假设您正在继续使用基于使用
create-react-app的标准项目
create-react-app 。 这就是工作之前
App组件代码的样子。
import React from "react" function App() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default App
让我们在该文件所在的同一文件夹中创建
TodoItem.js文件，其中将存储
TodoItem组件的代码。 现在
App.js以下命令将此文件导入
App.js文件：
import TodoItem from "./TodoItem"
您可以稍后使用
TodoItem组件
TodoItem （尚未编写）来执行此操作。 现在，我们将处理此代码。 将会是这样：
import React from "react" function TodoItem() { return ( <div> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
注意两件事。 首先，此组件返回两个元素-因此它们被包装在
<div>元素中。 其次，它返回的是
App.js文件中的一对check / description元素之一的
App.js 。
现在，我们再次转到
App.js文件，而不是检查/描述对，我们在它返回的标记中使用
TodoItem组件的实例：
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
结果，应用程序形成的页面将如下图所示。
浏览器中的应用外观实际上，与以前的版本相比，它的外观并没有改变，但是现在使用一个组件形成成对的元素这一事实为我们带来了巨大的机会，我们将在以后使用。
现在，我们将完成第二个任务，即使用CSS类对应用程序进行样式设置。 为此，我们将
App组件的代码转换为以下形式：
import React from "react" import TodoItem from "./TodoItem" function App() { return ( <div className="todo-list"> <TodoItem /> <TodoItem /> <TodoItem /> <TodoItem /> </div> ) } export default App
在这里，我们将类名称分配给
<div>元素。 同样，
TodoItem使用
TodoItem组件
TodoItem ：
import React from "react" function TodoItem(){ return ( <div className="todo-item"> <input type="checkbox" /> <p>Placeholder text here</p> </div> ) } export default TodoItem
现在，我们
index.css包含项目中已经存在的CSS
index.css文件，因为它是使用
index.js文件中的
create-react-app ：
import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") )
将以下样式描述添加到
index.css ：
body { background-color: whitesmoke; } .todo-list { background-color: white; margin: auto; width: 50%; display: flex; flex-direction: column; align-items: center; border: 1px solid #efefef; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15); padding: 30px; } .todo-item { display: flex; justify-content: flex-start; align-items: center; padding: 30px 20px 0; width: 70%; border-bottom: 1px solid #cecece; font-family: Roboto, sans-serif; font-weight: 100; font-size: 15px; color: #333333; } input[type=checkbox] { margin-right: 10px; font-size: 30px; } input[type=checkbox]:focus { outline: 0; }
现在，这就是应用程序页面在浏览器中的外观。
浏览器中的应用外观您可以自己分析和编辑这些样式。
如果我们谈论样式中使用的代码的特殊性，请注意
className关键字用于将元素分配给元素，并且React支持内联样式。 这就是我们在VSCode中的应用程序项目在现阶段的样子。
VSCode中的应用程序项目现在，如果我们尝试使用现有功能，则复选框会响应用户交互。
标志响应用户交互。但是同时，应用程序代码对这些标志所发生的更改一无所知。 如果代码知道应用程序界面中正在发生的事情，这将使我们能够组织其对各种事件的反应。 例如，可以以某种方式更改待办事项列表中的项目，其中已选中一个复选框，该复选框指示相应的任务已完成。 在下一课中，我们将讨论如何执行此操作。
第17课，属性，第1部分。HTML元素的属性
→
原创让我们讨论一下React中属性的概念。 让我们从页面的示例HTML代码开始：
<html> <head></head> <body> <a>This is a link</a> <input /> <img /> </body> </html>
如您所见，与React没有任何关系。 我们面前是通常的HTML标记。 请注意此标记描述的页面正文中存在的三个元素：
<a> ，
<input />和
<img /> ，并思考它们的问题所在。
这里的问题是所有这些元素都无法实现其固有功能。
<a>标记描述的链接无处可去。 该标签需要分配一个属性（property）
href ，其中包含当您单击链接时将重定向到的某个地址。 对于我们示例中的
<img /> ，通常存在相同的问题。 未为其分配
src属性，该属性指定该元素将显示的图像，本地图像或可通过URL访问的图像。 结果是，要确保
<a>和
<img>元素的正确操作，有必要分别设置它们的
href和
src属性。 如果我们谈论
<input>元素，那么在不设置其属性的情况下，它将在页面上显示输入字段，但是通常不使用这种形式，而是设置其属性
placeholder ，
name ，
type 。 例如，最后一个属性允许您从根本上更改
<input>元素的外观和行为，将其从文本输入字段转换为标志，单选按钮或发送表单的按钮。 应该注意的是，我们在此互换使用的术语“属性”和“财产”。
通过编辑上面的代码，我们可以将其转换为以下形式：
<html> <head></head> <body> <a href="https://google.com">This is a link</a> <input placeholder="First Name" name="" type=""/> <img align="center" src=""/> </body> </html>
这种形式仍然不太正常，但是至少在这里，我们为HTML元素的某些属性设置值，并指定了可以在其中输入更多属性值的位置。
实际上，如果上述HTML元素的属性概念对您很清楚，那么您可以轻松弄清楚React组件的属性概念。 也就是说，我们正在谈论的事实是，在React应用程序中，我们可以使用我们自己开发的组件，而不仅仅是标准HTML标签。 在使用组件时，我们可以为其分配属性，这些属性在组件中进行处理时可以更改其行为。 例如，此类属性使您可以自定义组件的外观。
第18课，属性，第2部分。可重用组件
→
原创在讨论关于在React中使用属性的讨论之前，让我们看一下另一个概念性概念。 看看YouTube主页。
YouTube首页我确信React不会使用该页面，因为Google从事Angular框架的开发，但是我们在本示例中将考虑的原则是通用的。
考虑使用React功能如何构建这样的页面。 您可能要注意的第一件事是，该页面可以分成由独立组件表示的片段。 例如，很容易注意到，显示有关下图中突出显示的视频剪辑的信息的元素彼此非常相似。
YouTube主页，元素彼此相似如果仔细观察这些元素，结果发现每个元素的顶部都有一个图像，并且所有这些图像的大小均相同。 这些元素中的每个元素都有一个粗体的标题，紧靠图像下方。 每个元素都包含有关相应视频的观看次数，发布日期的信息。 在元素上显示的每个图像的右下角，都有有关相应视频剪辑持续时间的信息。
可以理解，创建此页面的人没有执行诸如复制，粘贴或修改代码来表示其上显示的每个元素的操作。 如果使用React工具创建了这样的页面，则可以想象视频剪辑卡是某个组件的实例，例如
<VideoTile /> 。 而且，这样的组件包括许多其他组件，它们是图像，标题，关于剪辑的持续时间的信息以及视频剪辑卡的其他元素。
前面的内容使我们想到了形成这样一个页面的想法，即开发了一个单独的组件，即视频剪辑卡。 同时，该组件的许多实例显示在页面上，每个实例都显示唯一的数据。 即，在开发这样的组件时，必须提供改变某些属性（例如图像的URL）的可能性，从而影响其外观和行为。 事实上，这是我们下一课的重点。 但是在开始之前，我希望您对在React中使用组件的想法感到满意。
想一想我们讨论父组件和子组件的课程，这些组件可以形成深度很大的嵌套结构。 例如，在我们的情况下，您可以在页面上选择视频剪辑卡的水平组，可能在某种服务组件的帮助下以这种方式定位了视频剪辑卡，以显示元素列表。 这些元素是视频剪辑卡，它们又输出代表特定剪辑信息的一定数量的其他元素。
YouTube主页，父级和子级组件此外，在页面的左侧，您可以看到一组彼此相似的垂直元素。 它们很可能是同一组件的实例。 此外，它们每个都有自己的图像和文本。
用于开发Web界面的现代框架（例如React，Angular或Vue）允许您一次创建一个组件并通过设置其属性来重用它，这是这些框架流行的原因之一。 这极大地促进并加速了开发。
总结
在本课程中，我们继续研究TODO应用程序，并讨论了HTML元素的属性和重用组件的思想，这使我们能够使用React组件的属性。 这是我们下次要做的。
亲爱的读者们！ 您了解零部件属性的概念吗？
