3

考虑以下代码。Wrapper1渲染，将组件作为道具Wrapper2传递给它，以及最终期望的几个道具，以及. 然后渲染传递给它的组件，将它的所有道具传递给该渲染的组件。在这种情况下，组件由 渲染，并且它正在接收所需的道具。FinalFinalfinalPropw2propWrapper2FinalWrapper2

但是，Flow 不理解这一点。我收到以下两个错误：

  1. propertyfinalProp在对象类型中找不到属性 另请参阅：React 元素Wrapper2
  2. propertyw2prop在对象类型中找不到属性 另请参阅：React 元素Wrapper2
type FinalT = {
  finalProp: number,
  w2prop: number,
};

function Final(props: FinalT): React.Element<*> {
  return (
    <div>
      {props.finalProp}
      {props.w2prop}
    </div>
  );
}

export default function Wrapper1(): React.Element<*> {
  return (
    <Wrapper2
      component={Final}
      finalProp={7}
      w2prop={7}
    />
  );
}

type Wrapper2T = {
  component: (*) => React.Element<*>,
};

function Wrapper2(props: Wrapper2T): React.Element<*> {
  const Cmp = props.component;

  return <Cmp {...props} />;
}

根据错误消息，Flow 显然明白这Final是由Wrapper2. 但是，它没有意识到正在提供必要的道具。我觉得这很奇怪。如果它可以告诉props.componentin Wrapper2is Final，那么我希望它知道 in 的全部范围props。

如果我添加finalProp和w2prop，type Wrapper2T那么 Flow 很高兴。但这是一个非首发，因为Wrapper2它应该是一个高阶组件，它不知道它最终呈现什么组件。

我应该用不同的方式来注释这些流类型吗？或者创建和渲染这些组件的不同模式？我认为我上面的内容是 React 中的标准模式，因此必须有一些解决方案。

4

0 回答 0