React学习手册

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

}) => ...