如何流动类型的组件道具和获取衍生状态从道具，如果他们的道具不同?

Question

我和他的道具有Component，我还有一个额外的道具用于getDerivedStateFromProps。因此，如果我使用额外的道具设置道具，它会抛出未使用道具的错误。如果我在没有额外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
};

注意：您使用两种不同的道具类型：最初使用的Props和getDerivedStateFromProps内部使用的StaticProps道具类型。这在我眼里真的没有意义。

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

Answer 2

我在@BoyWithSilverWings的帮助下修复了它，他建议在.eslintrc中设置反应版本并且可以工作。仅将此添加到.eslintrc文件中：

"settings": {
"react": {
"version": "<your react version>" // 16.8.5
}
}