Question

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

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的签名

时，我能够使编译器停止自便

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

就像@ types / react-intl正在返回不同的函数签名...

这是react-intl更改功能签名的地方：

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

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

1 个答案: