赵走x博客 - 开发者的网上家园

43、构建实例应用：应用配置

资源编号:76096 书籍 React快速上手开发热度：105

目前为止，所有底层组件都已经完成了。还剩下两个组件需要开发，分别是改进版本的数据表格Excel 以及顶层组件Whinepad。这两者都需要借助一个schema 对象进行配置，它用于描述你希望在应用中处理的数据类型。

目前为止，所有底层组件都已经完成了。还剩下两个组件需要开发，分别是改进版本的数据表格Excel 以及顶层组件Whinepad。这两者都需要借助一个schema 对象进行配置，它用于描述你希望在应用中处理的数据类型。针对这个评酒应用，以下是一份schema 示例代码
（js/source/schema.js）：

```
import classification from './classification';

export default [
    {
        id: 'name',
        label: 'Name',
        show: true, // 设置是否在Excel表格中显示
        sample: '$2 chuck',
        align: 'left', // 设置对齐方式
    },
    {
        id: 'year',
        label: 'Year',
        type: 'year',
        show: true,
        sample: 2015,
    },
    {
        id: 'grape',
        label: 'Grape',
        type: 'suggest',
        options: classification.grapes,
        show: true,
        sample: 'Merlot',
        align: 'left',
    },
    {
        id: 'rating',
        label: 'Rating',
        type: 'rating',
        show: true,
        sample: 3,
    },
    {
        id: 'comments',
        label: 'Comments',
        type: 'text',
        sample: 'Nice for the price',
    },
]
```
这个示例的用法是ECMAScript 模块中你可以想到的最简单的一种形式——只输出一个变量。

这个模块还引入了另一个简单的模块，里面包含一长串用于预填充表单的选项（js/source/classification.js）：

```
export default {
    grapes: [
        'Baco Noir',
        'Barbera',
        'Cabernet Franc',
        'Cabernet Sauvignon',
// ....
    ],
}
```
借助schema 模块，现在你就可以配置应用中所需的数据类型了。