在React课程的今天翻译中，我们建议您完成使用JavaScript创建组件集的实际任务，并继续使用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部分：课程项目第22课。 动态形成零件组
→
原创▍工作
基于
create-react-app生成的标准React应用程序项目，并使用
vschoolProducts.js的
vschoolProducts.js数据文件的代码，创建一个应用程序，该应用程序在页面上显示使用标准
.map()数组方法生成的
Product组件列表。基于来自
vschoolProducts.js数据。
记住要创建组件实例，并向它们传递具有唯一标识符的
key属性，否则系统将发出警告。
在解决问题的过程中，可以使用
App.js文件的以下准备：
import React from "react" import productsData from "./vschoolProducts" function App() { return ( <div> </div> ) } export default App
这是
vschoolProducts.js文件
vschoolProducts.js ：
const products = [ { id: "1", name: "Pencil", price: 1, description: "Perfect for those who can't remember things! 5/5 Highly recommend." }, { id: "2", name: "Housing", price: 0, description: "Housing provided for out-of-state students or those who can't commute" }, { id: "3", name: "Computer Rental", price: 300, description: "Don't have a computer? No problem!" }, { id: "4", name: "Coffee", price: 2, description: "Wake up!" }, { id: "5", name: "Snacks", price: 0, description: "Free snacks!" }, { id: "6", name: "Rubber Duckies", price: 3.50, description: "To help you solve your hardest coding problems." }, { id: "7", name: "Fidget Spinner", price: 21.99, description: "Because we like to pretend we're in high school." }, { id: "8", name: "Sticker Set", price: 14.99, description: "To prove to other devs you know a lot." } ] export default products
▍解决方案
这是
App.js文件的代码：
import React from "react" import Product from "./Product" import productsData from "./vschoolProducts" function App() { const productComponents = productsData.map(item => <Product key={item.id} product={item}/>) return ( <div> {productComponents} </div> ) } export default App
请注意，数据文件中对象的
id属性是可选的。 此属性对于设置通过
Product组件实例的
.map()方法创建的
key属性很有用。
这是
Product.js文件的代码：
import React from "react" function Product(props) { return ( <div> <h2><font color="#3AC1EF">{props.product.name}</font></h2> <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p> </div> ) } export default Product
在这里，当派生包含商品价格的属性时，该属性在组件中显示为
props.product.price ，我们使用
toLocaleString()方法来格式化商品的数量。
这就是VSCode中的应用程序项目。
VSCode中的应用这是浏览器中的应用程序页面。
浏览器中的应用程序页面注意商品价值的显示形式。
第23课。 TODO应用程序。 阶段数3
→
原创在这里，我们将继续处理TODO应用程序，该应用程序
在此处和
此处已处理。 特别是，在这里您将被要求应用有关组件列表动态形成的知识，以创建应用程序显示的待办事项列表。
▍工作
使用
todosData.js案例
todosData.js （其内容在下面给出），创建
TodoItem组件列表，
TodoItem此列表显示在
App组件中。 请注意，您将需要修改
TodoItem组件的代码，以便它可以显示传递给它的属性。
这是
todosData.js文件的内容：
const todosData = [ { id: 1, text: "Take out the trash", completed: true }, { id: 2, text: "Grocery shopping", completed: false }, { id: 3, text: "Clean gecko tank", completed: false }, { id: 4, text: "Mow lawn", completed: true }, { id: 5, text: "Catch up on Arrested Development", completed: false } ] export default todosData
▍解决方案
这是
App.js文件的代码：
import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() { const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>) return ( <div className="todo-list"> {todoItems} </div> ) } export default App
这是
TodoItem.js文件的代码：
import React from "react" function TodoItem(props) { return ( <div className="todo-item"> <input type="checkbox" checked={props.item.completed}/> <p>{props.item.text}</p> </div> ) } export default TodoItem
这是VSCode中的应用程序项目。
VSCode中的应用应该指出的是，在完成本实践课程所提供的工作之后，尽管我们将为应用程序配备新功能，但我们仍会破坏其功能。 特别是，我们正在谈论标志的状态。 将检查使用
props.item.completed属性设置为
true的标志来设置状态，将使用相同属性设置为
false的标志不选中。 但是，如果您单击应用程序页面上的标志，则不会发生任何事情，因为我们错误地配置了相应的HTML元素。 您可以在控制台中看到有关此的警告。
浏览器中的应用程序页面和控制台中的警告稍后，我们将讨论表格并修复我们的培训应用程序，同时继续进行处理。
总结
在本课程中，您有机会练习创建组件文件，使用在创建组件实例时传递给组件实例的属性，以及使用标准的
.map() JavaScript数组方法。 此外，在这里，我们继续致力于培训应用程序。 下次，我们将讨论基于类的组件。
亲爱的读者们！ 您是否掌握了使用
.map() JavaScript数组方法创建组件集的技术？
