简介

我们的项目使用的技术栈是Meteor和React全家桶，前端UI库用的是Bootstrap．最近经人介绍了解到阿里蚂蚁金服前端团队出品的antd和antd-mobile，基于React和TypeScript开发，提供了很多实用的组件，基本满足所有常见场景的前端设计和实现．

其中antd-mobile是antd的移动端实现，支持React-Native．

传送门：

在Meteor中使用antd

在Meteor中使用antd很简单，只需按照其官方文档安装antd babel-plugin-import，并配置.babelrc文件．如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
meteor npm install --save antd
meteor npm install --save-dev babel-plugin-import
//.babelrc文件
{
  "plugins": [
    ["import", [
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]]
  ],
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

其中style一项，填写为true会报错，填写为css则正常．然后在项目中我们就可以直接引入各个组件，这个插件会自动按需加载需要的js和css文件．简单例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react-dom';
import { DatePicker, Button } from 'antd';

export default class Test extends Component {
  render(){
    return (
      <div>
        <DatePicker />
        <Button type='primary'>Sure</Button>
      </div>
    );
  }
}

对于Meteor React这种单页面应用，分页很令人头疼，一般都是做成无限向下滚动，没有分页功能．而antd提供了Pagination组件，并且在展示很多数据的Table组件里，只需添加一个参数，就能实现分页功能，如下：

1
<Table columns={columns} dataSource={data} pagination={{ pageSize: 30 }} />

遇到的一些问题

在使用Popconfirm组件时，按照其文档的写法，一直都是刷新页面后，其组件会自动执行，比如我在测试时，添加了100个用户，并提供了删除命令，用Popconfirm组件包裹，本来是当管理员点击删除，并确定后，再删除用户，可结果是刷新页面后，删除命令自动执行了，不到２秒，把100个用户全都删除了．

原本写法：

1
2
3
4
5
6
7
8
9
<Popconfirm title="确定要删除吗？" 
  onConfirm={this.handleConfirm(user._id)} >
  <a href='#'>删除</a>
</Popconfirm>

handleConfirm(id){
  const { dispatch, deleteUser } = this.props;
  dispatch(deleteUser(id));
}

一开始以为要加event事件，onConfirm={(e) => this.handleConfirm(e, user._id)}，然后在handleConfirm(e, id){}里添加e.preventDefault()，尝试后发现不行，一直报错．最后又尝试了好久，发现要这样写：

1
2
3
4
5
6
7
8
9
<Popconfirm title="确定要删除吗？" 
  onConfirm={() => this.handleConfirm(user._id)} >
  <a href='#'>删除</a>
</Popconfirm>

handleConfirm(id){
  const { dispatch, deleteUser } = this.props;
  dispatch(deleteUser(id));
}

只需用箭头函数包裹，不用传递event事件，完美解决．

在Meteor中使用antd-mobile

antd-mobile目前含有web版和react-native版，并且没有分开，导致很容易出现依赖问题，比如我不需要react-native，但是它一直提示需要安装react-native，关键是安装后，仍然报错，让人崩溃．

在Meteor中使用antd-mobile，麻烦很多，其实不只是Meteor,其Github issues里有大量类似的问题，总结起来两大类，见issues #602:

  1. 找不到模块antd-mobile或者找不到引入的具体组件
  2. 提示依赖react-native

其给出了具体的办法，但是仍然不能成功，现阶段解决办法就是在项目中直接引入其dist目录下的css和js文件．如下：

1
import { List, Button, Flex } from 'antd-mobile/dist/antd-mobile';

总结

  1. antd没有响应式设计，在移动端要使用antd-mobile
  2. antd-mobile目前还不如antd成熟