在react的TS项目中定义defaultProps

佚名 7年前 (2019-04-11) 随笔 1105人围观抢沙发百度已收录

如何在react的TS项目中定义组件的defaultProps，代码如下：

import React, { Component } from 'react';
import '../../../style/animation/loading.scss';

interface ILoadingProps {
  scale?: number;
}

interface ILoadingStates {
  loadingSize: any;
}

const _defaultProps = { scale: 1 };

class Loading extends Component<ILoadingProps, ILoadingStates> {
  private static defaultProps = _defaultProps; //主要是用 static 关联当前的class Loading

  constructor(props: ILoadingProps) {
    super(props);
    this.state = {
      loadingSize: {
        transform: 'scale(' + this.props.scale + ')',
        WebkitTransform: 'scale(' + this.props.scale + ')',
        msTransform: 'scale(' + this.props.scale + ')',
        MozTransform: 'scale(' + this.props.scale + ')',
        OTransform: 'scale(' + this.props.scale + ')'
      }
    };
  }

  public render() {
    return <div className='lds-spinner' style={this.state.loadingSize}>
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
    </div>;
  }
}

// (Loading as any).defaultProps = { scale: 1 }; 这样定义也可以但是不推荐

export default Loading;