在react的TS项目中定义defaultProps

如何在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;

 

转载于:https://www.cnblogs.com/jimaww/p/10691364.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值