December 2017
Intermediate to advanced
329 pages
6h 9m
Chinese
Content preview from React学习手册
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
Props
、
State
和组件树
｜
135
在星标评分中，
starsSelected
的数量来自每种颜色的评分。每种颜色的所有
State
数
据在组件树中都是通过属性向下传递给子组件的。当根组件中的
State
数据发生变化
后，
React
将会尽可能高效地修改
UI
来反映这些新的
State
。
回传数据到组件树
颜色管理器中的
State
只能通过调用
App
组件中的
setState
方法更新。如果用户初始化
读取了任意来自
UI
的变更，它们的输入将会需要在组件树中向上回传到
App
组件，以
便更新
State
数据（见图
6-10
）。这可以通过回调函数的属性来完成。
图
6
-
10
：当存在UI事件时，向上回传数据到根组件
为了添加新的颜色，我们需要一种唯一标识每种颜色的方法。这个标识符将会用于定
位
State
数组中的颜色。我们可以使用
uuid
库来创建绝对唯一的
ID
：
npm install uuid --save
所有从我们在本章前面的
"
引用”中构造的
AddColorForm
组件收集到的新颜色将会被
添加到颜色管理器中。该组件包含一个可选的回调函数属性，名为
onNewColor
。当用
户添加了一种新的颜色，然后提交表单，
onNewColor
回调函数会根据从用户那里获取
的新标题和十六进制颜色值触发执行：
136
｜
第
6
章
import { ...