React快速上手开发

lint

、

Flow

、测试与复验

｜

145

接下来我们一起修复这些问题。

可以更严格地限制

data

变量，并将其注解为一个对象数组：

let data: Array<Object>;

然后把从数据存储中读取出来的变量称为

storage

，其类型为字符串（也可能为

null

，因

此需要在前面加上问号）：

const storage: ?string = localStorage.getItem('data');

当

storage

为字符串时，只需要直接解析就可以了。否则，你需要设置

data

为数组类型，

并把示例数据填充到数组的第一个元素中：

if (!storage) {

data = [{}];

schema.forEach(item => data[0][item.id] = item.sample);

} else {

data = JSON.parse(storage);

}

现在这两个文件都已经兼容

Flow

了。为了节省篇幅，不再列出所有经过兼容处理的代码；

接下来我们将关注

Flow

的几个更加有趣的特性。本书附带的代码库（

https://github.com/

stoyan/reactbook/

）中包含了完整代码。

7.3.6

　关于

props

和

state

类型检查的更多内容

当你使用无状态函数创建

React

组件时，可以像之前看到的那样，为

props

参数加上注解：

type Props = {/* ... */};

const Button = (props: Props) => {/* ... */}; ...