132
6
6
-
8
:包含三种颜色State的颜色管理器
在组件树上向下传递属性
本章前面介绍过将属性在组件树上向下传递,我们创建了一个
StarRating
组件用于保
State
中的评分数据。在颜色管理器中,评分数据是存储在每个颜色对象中的。将
StarRating
组件当作表现层组件更有意义,
5
并且将它声明为一个无状态函数式组
件。
表现层组件只关心应用程序的外观。它们只渲染
DOM
元素或者其他表现层组件。传
递给这些组件的所有数据都是通过属性完成的,输出的数据是通过回调函数传递的。
为了让
StarRating
组件变成纯粹的表现层组件,我们需要将其中的
State
数据移除。表
现层组件只使用参数属性。因为我们已经从该组件中移除了
State
数据,当用户修改评
分时,这些数据将会通过一个回调函数从组件中回传输出:
5
Dan Abramov,
Presentational and Container Components
, Medium, March 23, 2015
http://bit.ly/2ndQ9u0
)。
Props
State
和组件树
133
const StarRating = ({
starsSelected=0
, totalStars=5,
onRate=f=>f
}) =>
<div className="star-rating">
{[...Array(totalStars)].map((n, i) =>
<Star key={i}
selected={i<starsSelected}
onClick={() =>
onRate(i+1)
}/>
)}
<p>
{starsSelected}
of {totalStars} stars</p>
</div>
首先,
starsSelected
不再是一个
State
变量,它现在是一个属性。其次,一个
onRate
回调函数被添加到组件中。与之前当用户修改评分后调用
setState
相反,该组件现在
会调用
onRate
回调函数,并将评分数据作为参数进行传递。
可复用组件的
State
用户也许需要创建一个包含多种
State
UI
组件,以便在若干不同应用程序中分
发和复用。将组件中的所有
State
变量移除,使之只用于表现外观的做法并不是
绝对的。这是一条非常好的规则,不过有时在表现层组件中保留
State
可能效果
更好。
State
数据限制在单一位置,即根组件,意味着所有数据都必须作为属性向下传递给
子组件(见图
6-9
)。
在颜色管理器中,
State
数据是以一个颜色数组在
App
应用组件中进行声明的。这些颜
色会作为属性向下传递给
ColorList
组件:
class App extends Component {
constructor(props) {
super(props)
this.state = {
colors: []
}
}
render() {
const { colors } = this.state
return (
<div className="app">
<AddColorForm />
<ColorList colors={colors} />
</div>
)
}
}
134
6
6
-
9
App应用中的State数据是通过属性向下传递给子组件的
颜色数组初始化时是空的,因此
ColorList
组件将会显示一段文本来替代颜色。当数
组中包含颜色时,每种独立的颜色数据将作为属性传递给
Color
组件:
const ColorList = (
{ colors=[] }
) =>
<div className="color-list">
{(colors.length === 0) ?
<p>No Colors Listed. (Add a Color)</p> :
colors.map(color =>
<Color key={color.id} {...color} />
)
}
</div>
现在
Color
组件可以显示颜色的标题和十六进制值,并将颜色评分作为属性向下传递给
StarRating
组件:
const Color = (
{ title, color, rating=0 }
) =>
<section className="color">
<h1>{title}</h1>
<div className="color"
style={{ backgroundColor: color }}>
</div>
<div>
<StarRating
starsSelected={rating}
/>
</div>
</section>

Get React学习手册 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.