React + Typescript：render prop属性*类型缺失

Question

有人可以告诉我此设置有什么问题。 我在react-intl的injection组件周围做了一个小的包装，因此可以将其用作渲染道具，但编译器向我抱怨...

interface Props {
  intl: InjectedIntl;
  children(props: InjectedIntl): JSX.Element;
}

class Intl extends React.Component<Props, {}> {
  public render() {
    return this.props.children(this.props.intl);
  }
}

export default injectIntl(Intl);

然后渲染道具就是这样...

  <Intl> // <-- compiler complaining on this line
    {(intl) => (
      <div>
       {intl.messages.iCanHazRenderProp}
      </div>
    )}
  </Intl>

编译器在上面的行中抱怨此错误

Type '{ children: (intl: InjectedIntl) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Props, ComponentState, any>> & Readonly<...'. Type '{ children: (intl: InjectedIntl) => Element; }' is not assignable to type 'Readonly<Props>'. Property 'intl' is missing in type '{ children: (intl: InjectedIntl) => Element; }'.

编辑：injectIntl​​的签名

(alias) injectIntl<Props>(component: ReactIntl.ComponentConstructor<Props & ReactIntl.InjectedIntlProps>, options?: ReactIntl.InjectIntlConfig | undefined): React.ComponentClass<Props> & {
WrappedComponent: ReactIntl.ComponentConstructor<Props & ReactIntl.InjectedIntlProps>;

}导入injectIntl

Answer 1

当我更改了injectIntl的签名时，我能够使编译器停止injectIntl

... WrappedComponent: React.ComponentType<IVisualizationProps & InjectedIntlProps>

看起来@ types / react-intl返回的是不同的函数签名...

这是react-intl更改函数签名的方法：

https://github.com/DefinitelyTyped/DefinitelyTyped/commit/5e471f03c00b89ac358848e9cd66333466297f45