Question

以下代码可用于注释通过prop的HOC

/* @flow */

import * as React from 'react';


/* withHoverState HOC */

type State = {
  hover: boolean,
};

export type InjectedProps = {|
  foo: string
|};

function withHoverState<T>(
  InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
): React.AbstractComponent<T> {
    return (props) => <InnerComponent {...props} foo="bar" />
  };


/* Button HOC */

type ButtonProps = {|
  text: string,
  ...InjectedProps
|}

const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>

const Button = withHoverState(UnwrappedButton);


/* Test usage */

const Test1 = () => <Button text="test" />

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBdkwBDAZzACUBTUgY2KnzizAHJ87H2BudVKDAIMhABYAJOADca+AMqFShGmAkB5AMLI0qQgE8cqxctUBeMAG9UYMGJlyAXGABGcODDoA7ADSoAvvyoNAAeeERgBkZgAJJeAFY0jDQAJgAKLDiUFpYAPjZgUO7O5IT4GF4A5qi5gehQAK5ejBhwXsKikg4KSioAPAAqAHwAFAVxXnKarHiTXoTOtAyEAHTTuG008wOGNH15YCtHAz6HR3GJyemZlLVDqACUi9yrAIIupfjL67NbhINDKwFACQXEIDXw7RGOBuDzAZkBfQmUxmm3mViOKxhcCy-kK7jMACIXKR8ISwMB7rY6ughAAhBqEQhtNRaHToKKqBlMtoZHHZKz5WwqEILMCfCqVPy2TEXJIqa78mr+dD0NqlMAAVS8CC+OCMKW5zPaFhGlkioUIpyKcDA-mcRt5sPhiJcjONQwAJJYRYQ8QBaMDem3+PrAN08rz3VBqrwax0mjriKSyHqmEba3WkfWpBMPIKCcADGgahrkUiVVQoVXq4jF0oARnhYBGcIRYD6CYtoqJKlK5Mp6CAA

但是，我需要将内部组件作为一个类，并且当我对其进行更改时，流程将不再令人满意

/* @flow */

import * as React from 'react';


/* withHoverState HOC */

type State = {
  hover: boolean,
};

export type InjectedProps = {|
  foo: string 
|};

function withHoverState<T>(
  InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
 ): React.AbstractComponent<T> {
  class Inner extends React.Component<T> {
    render() {
      return (
        <InnerComponent
          foo="bar"
          {...this.props}
        />
      );
    }
  };
  return Inner;
}

/* Button HOC */

type ButtonProps = {|
  text: string,
  ...InjectedProps
|}

const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>

const Button = withHoverState(UnwrappedButton);


/* Test usage */

const Test1 = () => <Button text="test" />

给出错误

29:   return Inner;
             ^ Cannot return `Inner` because inexact class `Inner` [1] is incompatible with exact `T` [2].

    References:

    19:   class Inner extends React.Component<T> {
                ^ [1]

    [LIB] ..//static/v0.122.0/flowlib/react.js:258:   > = React$AbstractComponent<Config, Instance>;

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBdkwBDAZzACUBTUgY2KnzizAHJ87H2BudVKDAIMhABYAJOADca+AMqFShGmAkB5AMLI0qQgE8cqxctUBeMAG9UYMGJlyAXGABGcODDoA7ADSoAvvyoNAAeeERgBkZgAJJeAFY0jDQAJgAKLDiUFpYAPjZgUO7O5IT4GF4A5mCouYHoUACuXowYcF7CopIOCkoqADwAKgB8ABQFcV5ymqx4U16EzrQMhAB0M7jtNAuDhjT9eWCrx4M+R8dxicnpmZR1wzYAlEvcawCCLqX4Kxtz24RDYZWAr0GAUSiTORgUIqLwpSjLRjrWZbBaA4G2WxcOFyUaPDGYrE0QiNfAdcaEwn9SH4X6owgFSmYopwMwAIhcpHwbMZTKsx1W4gw5FWOFu-l5hOADyZj34hIltnqRJJZNiXim+H4EsE4AAQo1CIR2motDp0FFVAaje0MnAsmAcvlbCoQoswF8KpU-LYBZckiobvbyLUdfR2qUwABVLwIb44Iwpa3GjoWUaWSIws4ssD+ZzJ223fFmIH9FyGlPDAAklldhH8YAAtGAayz-P1gOWbV4Hqhw15IwXU51xFJZL1TKMY3HSAnUkO5QIhIMaJHGuRSJVVCh0P3IyvSgBGR1gPGO0tDzNu9kqUpssDS9BAA

谁能告诉我如何使注释与类组件一起工作？

如何使用流类型中的类组件注释通过其他道具传递的React HOC

0 个答案: