React学习手册

React Router

｜

279

每种颜色都包含一个唯一

ID

。这个

ID

可以用来查找保存在

State

中的特定颜色。比如，

我们可以创建一个

findById

函数，它会根据

id

字段在数组中查找相关的对象：

import { compose } from 'redux'

export const getFirstArrayItem = array => array[0]

export const filterArrayById = (array, id) =>

array.filter(item => item.id === id)

export const findById = compose(

getFirstArrayItem,

filterArrayById

)

findById

函数遵循了第

2

章讨论的函数式编程范式。我们可以看到

findById

方法首先会

根据

ID

对数组进行过滤，然后从已过滤数组中返回找到的第一个元素。我们可以使用

findById

函数根据它们的唯一

ID

在

State

中对颜色对象进行定位。

通过

router

，我们可以通过

URL

获取颜色的

ID

。比如，我们将要用于显示“草坪绿”

的

URL

，其中包含了该颜色的

ID

：

http://localhost:3000/#/58d9caee-6ea6-4d7b-9984-65b145031979

Router

参数允许用户获取它们的参数值。它们可以在路由中使用冒号进行定义。比

如，我们可以获取唯一

id

，然后使用

Route

将它另存为一个名为

id

的参数中：

<Route ...