Question

我第一次整合了flow来静态检查我的javascript资源。

我正在努力解决错误流程，我无法自行解决。它关于使用es6类和继承。更具体的是我创建了一些react组件，他们应该继承一些方法。

我有一个Callout Component，它代表一个未指定严重性的标注消息。为了使事情更简单，我考虑提供一个继承Callout组件的ErrorMessage组件。我的类结构看起来像：

React.Component
    > AbstractComponent (here i add some project-wide helpers for i18n and so on
        > Callout (this represents a pretty message on the screen)
            > ErrorMessage (this represents an error)

Flow告诉我：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/js/Components/Generic/ErrorMessage.js:14:43

statics of Callout [1] is not a polymorphic type.

     11│     icon: string
     12│ };
     13│
 [1] 14│ export default class ErrorMessage extends Callout<Props> {
     15│
     16│     static get defaultProps(): Props {
     17│         return {

部分Callout<Props>突出显示

我已经为Callout类定义了Props Type，所以这可能是问题，但我不能自己解决它。

类似的错误会抛出几行，我尝试通过寻址super.content来访问父方法（内容是Callout的get方法）。

提前致谢

更新：为什么我要使用类继承？

继承Callout＆gt; ErrorMessage只是为了减少冗余代码而存在，但它没有必要，所以让我们忽略它并讨论一个更常见的情况：

我希望有一个班级AbstractComponent，让我的项目中的常见内容更容易。

一些例子：

翻译字符串的打印：为了使组件成为多语言，我创建了一个实用程序类来生成翻译字符串，在组件内部工作就像

function render() {
    return (
        <div>
            {new Translation(
                'namespace',
                'key',
                [some, args],
                `${some} fallback message with optional ${args}`
            ).toString()}
        </div>
    )
}

为了使用它，我的堆栈中的每个组件都以top

上的import语句结束

import Translation from "../Core/Translation"

或在最好的情况下

import t from "../Core/Translation"

我使用webpack构建一个bundle，webpack似乎会破坏你使用的每个import语句编译的javascript。所以我认为 - 减少编码工作量和包大小 - 我提供了一个中间组件类，它添加了一些实用方法，如：

class AbstractComponent extends React.Component {

    constructor(props) {
        super(props);
        this.logger = props.logger || new Logger();
        this.api: ApiInterface = props.api || new MockApi();
    }

    translate(namespace: string, key: string, args: ?[] = null, fallback: ?string): string {
        return new Translation(namespace, key, args, fallback).toString();
    }

    svgSprite(id: string, className: string = "") {
        return (
            <SvgSprite id={id} className={className} />
        )
    }

}

我还添加了一些其他内容来向您展示中间Component类的更多理由。

所以，所有这些都有效！但流量抱怨丢失返回类型等等，这对我很好，为此我想使用流量！我无法解决的问题是继承本身......但对我来说它确实很有道理。

Answer 1

如果你真的想要处理继承（我没有问题，我觉得你以后可能会遇到问题），你可以做something like the following：

class AbstractComponent<Props: {}, State: ?{} = null> extends React.Component<Props, State> {
    api: ApiInterface

    logger: typeof Logger

    constructor(props) {
        super(props);
        this.logger = props.logger || new Logger();
        this.api = props.api || new MockApi();
    }

    translate(namespace: string, key: string, args: ?string[] = null, fallback: ?string): string {
        return new Translation(namespace, key, args, fallback).toString();
    }

    svgSprite(id: string, className: string = "") {
        return (
            <SvgSprite id={id} className={className} />
        )
    }
}

并使用它：

class Test extends AbstractComponent<{ some: string, args: string }> {
  render() {
    const { some, args } = this.props
     return (
        <div>
            {this.translate(
                'namespace',
                'key',
                [some, args],
                `${some} fallback message with optional ${args}`
            )}
        </div>
    )    
  }
}

现在，我会说在某种程度上我了解Facebook的来源。在这种情况下，您的组件实际上已经是一个抽象结构。如果你想让它变得更灵活（假设你有一个无状态组件可以从logger和translate函数中受益），你可以做one of two things：

这是我在两者中使用的已定义类型和翻译函数：

type CommonProps = {
  logger?: Logger,
  api?: ApiInterface,
  translate?: (namespace: string, key: string, args: ?string[], fallback: ?string) => string
}

// This should look familiar
function translate(namespace: string, key: string, args: ?string[] = null, fallback: ?string): string {
    return new Translation(namespace, key, args, fallback).toString();
}

高阶组件

function addCommonStuff({ logger = new Logger(), api = new MockApi(), translate = translate }: CommonProps) {
  return <Props: {}>(
    WrappedComponent: ComponentType<Props>
  ): ComponentType<
    $Diff<Props, $NonMaybeType<CommonProps>>
  > => (props: Props) => <WrappedComponent {...props} logger={logger} api={api} translate={translate} />
}

并使用如下：

class Test extends React.Component<{}> {}

const TestWithCommons = addCommonStuff({})(Test)

;<TestWithCommons />

具有渲染道具的可重用组件

class Common extends React.Component<CommonProps & { render?: Function, children?: Function }, $NonMaybeType<CommonProps>> {
  state = {
    logger: this.props.logger || new Logger(),
    api: this.props.api || new MockApi(),
    translate: translate
  }

  render() {
    const { children, render } = this.props

    return typeof render === 'function' ? render(this.state) : (
      typeof children === 'function' ? children(this.state) : null
    )
  }
}

并像这样使用它：

class TestCommon extends React.Component<{}> {
   render() {
     return <Common>
       {({ logger, api, translate }) => translate('namespace',
        'key',
        null,
        `Fallback message`
      )}
    </Common>
   }
}

除此之外，您不需要将defaultProps写为标注的吸气剂。 static defaultProps = {}应该足够了。它不应该考虑到道具或其他任何东西。如果是这样，最好使用state

流程：不是多态类型

1 个答案:

高阶组件

具有渲染道具的可重用组件