时间戳

首页 > 解决方案 > 与 Typescript 反应 defaultProps 对象数组

reactjs - 与 Typescript 反应 defaultProps 对象数组

问题描述

我正在尝试为对象道具数组的某些字段设置 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让另一个保持原样。

是否有捷径可寻 ？

标签： reactjstypescriptreact-native

解决方案

我将提取接口 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>
  }
}

希望能帮助到你。

推荐阅读