记录有关antd的坑

更新

[2019-7-21]

  • Initial release

[2019-7-22]

Added

  • 新增问题Type '"primary"' is not assignable to type 'undefined'. && Types of property 'type' are incompatible.

[2019-7-24]

Added

  • 新增问题Tabs、Collapse等组件的'defaultActiveKey'与路由'pathname不匹配.`

[2019-7-28]

Added

  • 新增问题路由跳转, 不重新刷新页面的情况下, antd的TabPane无法与pathname同步.

记录

1. 父组件处理子组件的表单数据

解决:

展开代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
export default withRouter(Form.create({
  onFieldsChange(props, changedFields) {
    props.onCollectionInputChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      collection_input: Form.createFormField({
        ...props.collectionInputValue,
        value: props.collectionInputValue.value || '',
      }),
    };
  },
}))(components);

2. Types of property ‘type’ are incompatible && Type ‘“primary”‘ is not assignable to type ‘undefined.

相关依赖:

  • @types/antd@1.0.0
  • @types/react@16.8.23
  • @types/react-dom@16.8.4

问题原因:

antd的类型包与最新的react不兼容

解决方法:

看到了antd的issue:

https://github.com/ant-design/ant-design/issues/15700#issuecomment-477333557

只需要升级@types/react类型包到16.8.8版本即可.

3. Tabs、Collapse等组件的'defaultActiveKey'与路由'pathname不匹配.

相关依赖:

问题原因:

defaultActiveKey默认指向当前的第一个tab-pane, 但是我的需求是tab-pane要与路由pathname对应, 这也就导致, 当我在另外一个路由刷新时, defaultActiveKey一直指向第一个.

解决办法:

只需做个简单的处理即可

展开代码 
1
2
3
4
5
6
7
8
function handleTabsDefaultActiveKey() {
  // 当前的tab-pane的key
  const basePathname = ['interfaces', 'friends', 'groups', 'collections'];
  const currentPathname = props.location.pathname;
  const processedPathname = basePathname.find((v) => currentPathname.includes(v));

  return processedPathname ? processedPathname : basePathname[0];
}

然后直接使用

展开代码 
1
2
3
<Tab defaultActiveKey={handleTabsDefaultActiveKey()}>
  <Tab.pane />
</Tab>

4. 路由跳转, 不重新刷新页面的情况下, antd的TabPane无法与pathname同步

相关依赖:

问题原因:

与上述第三个问题类似, 不同的是, 这次的需求是, 需要在另外一个tabPane来切换到另一个tabPane的路由, 但是出现的情况是url变了, 但是antd的tabs却没有跳转到对应的tabpane, 很蛋疼.

解决办法:

很简单, 只需要模拟点击tabpane就行了, 可以用MouseEvent自定义click事件, 通过dom触发. 我将其封装成了工具方法:

展开代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * 自定义模拟鼠标事件
 * @param element DOM元素
 * @param type 鼠标事件类型
 * @param callback 处理器
 */
export function customMouseEvent(
  element: Element,
  type: 'click' | 'dblclick' | 'mouseup' | 'mousedown',
  callback?: (event: MouseEvent) => void,
): void {
  if (element['click'] && typeof element['click'] === 'function') {
    element['click']();
  } else {
    const event = new MouseEvent(type, {
      bubbles: true,
    });

    element.dispatchEvent(event);
  }

  element.addEventListener(type, (e) => {
    callback && callback(e as MouseEvent);
  });
}