与 Typescript 反应 defaultProps 对象数组

Question

我正在尝试为对象 prop 数组的某些字段设置 defaultProps。

interface IProps {
  steps: Array<{
    id: number | string
    route?: string
    label?: string
    completed?: boolean
    disabled?: boolean
    active?: boolean
  }>
}


class Stepper extends React.Component<IProps, {}> {
  static defaultProps: IProps = {
    steps: ???
  }
  render() {
    return <div></div>
  }
}

我尝试在网上查找，但找不到为我的案例设置 defaultProps 的方法。

我想只为completed、disabled 和active 设置一些默认值，而让其他保持不变。

有没有简单的方法可以做到这一点？

Answer 1

我会提取接口IStep，并将其拆分为partial和complete一个：

interface IPartialStep {
  completed?: boolean
  disabled?: boolean
  active?: boolean
}

interface IStep extends IPartialStep {
  id: number | string
  route?: string
  label?: string
};

所以，现在使用 2 个组件是合乎逻辑的：步骤列表 (Stepper) 和步骤项目 (Step)：

interface IProps {
  steps: Array<IStep>
}

class Stepper extends React.Component<IProps, {}> {
  // actually, default props are moved to Step
  // so this one probably not needed.
  static defaultProps: IProps = {
    steps: []
  }
  render() {
    return this.props.steps.map(step => <Step {...step}/>);
  }
}

class Step extends React.Component<IStep> {
  static defaultProps: IPartialStep = {
    // here you can define default props for step item
    completed: false,
    disabled: false,
    active: false,
  }
  render() {
    const {id, route, ...} = this.props;
    // here you define how to display every step
    return <div>{id}</div>
  }
}

希望对你有帮助。