Ant-design-mobile: PullToRefresh type error

Created on 18 Nov 2018  ·  4Comments  ·  Source: ant-design/ant-design-mobile

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.2.6

Environment

mac 10.14.1, chrome 70

Reproduction link

https://github.com/jkvim/WLM-TypeScript-React-Starter

Steps to reproduce

复现代码

<PullToRefresh
  damping={60}
  style={{
    height: this.state.height,
    overflow: 'auto',
  }}
  indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
  direction={this.state.down ? 'down' : 'up'}
  refreshing={this.state.refreshing}
  onRefresh={this.handleRefresh}
>

What is expected?

如果没有传 getScrollContainer 或者 distanceToRefresh 则使用默认值,ts 类型检查没有报错

What is actually happening?

如果没有传 getScrollContainer 或者 distanceToRefresh, 都会报错,因为 rmc-pull-to-refresh 定义的类型是必传的

Most helpful comment

在vscode里,command+鼠标顺着点进去,就找到interface了,在rmc-pull-to-refresh/lib/PropsType.d.ts里写的清清楚楚,一目了然。

export interface Indicator {
    activate?: React.ReactNode;
    deactivate?: React.ReactNode;
    release?: React.ReactNode;
    finish?: React.ReactNode;
}
export interface PropsType {
    getScrollContainer: () => React.ReactNode;
    direction: 'down' | 'up';
    refreshing?: boolean;
    distanceToRefresh: number;
    onRefresh: () => void;
    indicator: Indicator;
    prefixCls?: string;
    className?: string;
    style?: React.CSSProperties;
    damping: number;
}

All 4 comments

遇到同样的问题。

看来都不用ts写的啊

遇到同样的问题,我暂时用下面来代码先把它们声明,来解决的

    getScrollContainer={() => undefined}
     distanceToRefresh={25}

在vscode里,command+鼠标顺着点进去,就找到interface了,在rmc-pull-to-refresh/lib/PropsType.d.ts里写的清清楚楚,一目了然。

export interface Indicator {
    activate?: React.ReactNode;
    deactivate?: React.ReactNode;
    release?: React.ReactNode;
    finish?: React.ReactNode;
}
export interface PropsType {
    getScrollContainer: () => React.ReactNode;
    direction: 'down' | 'up';
    refreshing?: boolean;
    distanceToRefresh: number;
    onRefresh: () => void;
    indicator: Indicator;
    prefixCls?: string;
    className?: string;
    style?: React.CSSProperties;
    damping: number;
}
Was this page helpful?
0 / 5 - 0 ratings