javascript - 如果它们的 Prop 不同，如何流动类型组件 Prop 和getDerivedStateFromProps？

Question

我有一个 Component用他的props 我还有一个额外的prop getDerivedStateFromProps .因此，如果我将 props 设置为额外的一个，它会抛出一个错误，指出 prop 未被使用。如果我在没有额外的 prop 的情况下进行设置，它会抛出一个错误，我无法放置不在组件 props 中的 prop:

type Props = {|
  name: string,
|};

type StaticProps = {|
  ...Props,
  surname: string,
|};

type State = {|
  name: string,
  surname: string,
|};

export class Foo extends Component<Props, State> {
  state: State = {
    name: '',
    surname: '',
  };

  static getDerivedStateFromProps(props: StaticProps) {
    return { surname: props.surname };
  }

  render() {
    return (
      <div>
        <div>{this.props.name}</div>
        <div>{this.state.surname}</div>
      </div>
    );
  }
}

使用此流类型会引发错误:Cannot create 'Foo' element because property 'surname' is missing in 'Props' [1] but exists in props [2].Flow(InferError) .

如果我设置 Component<StaticProps, State>它抛出另一个错误: 'surname' PropType is defined but prop is never usedeslint(react/no-unused-prop-types)

如何正确地进行流式输入？

Answer 1

就像错误告诉您的那样:Props 没有您最初尝试设置的属性 surname。因此，您需要使用该属性扩展您的类型:

type Props = {
  name: string,
  surname?: string
};

注意:您使用了两种不同的 Prop 类型:最初使用的Props 和在getDerivedStateFromProps 内部使用的StaticProps 。这在我看来没有任何意义。

编辑:如果您不需要 Props 中定义的所有属性，您可以使用 ? 后面的字符将它们设为可选属性的名称。