javascript - 流: is not a polymorphic type

我只是第一次集成flow来静态检查我的JavaScript源。

我正在努力寻找错误流，但我自己无法解决。关于使用es6类和继承。更具体地说，我创建了一些react组件，它们应该继承一些方法。

我有一个标注组件，它表示未指定严重性的标注消息。为了使事情更简单一些，我想到了提供一个ErrorMessage组件，该组件继承了Callout组件。我的类(class)结构看起来像:

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)

流程告诉我:

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>部分突出显示

我已经为标注类定义了 Prop 类型，所以这可能是问题所在，但我不能自己解决。

下面几行引发了类似的错误，在该行中，我尝试通过解决super.content(内容是Callout的get-method)来访问父方法。

提前致谢

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

继承Callout> ErrorMessage只是为了减少冗余代码而存在，但它不是必需的，因此让我们忽略它并讨论一个更常见的情况:

我想要一个类AbstractComponent来简化项目中的常见事情。

一些示例:

打印翻译字符串:为了使组件具有多种语言，我在组件内部创建了一个实用程序类来生成翻译字符串，该类的工作原理如下:

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

为了使用此功能，堆栈中的每个组件都以import语句结尾

import Translation from "../Core/Translation"

或最好的情况

import t from "../Core/Translation"

我使用webpack来构建一个包，并且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类的原因。

因此，所有这些工作!但是flow提示缺少返回类型等等，这对我来说很好，为此，我想使用flow!我无法解决的问题是继承本身。但是对我来说，这确实很有意义。

最佳答案

如果您真的想处理继承(我没有问题，我只是觉得您以后可能会遇到问题)，则可以执行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 />

具有渲染 Prop 的可重用组件

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作为标注的 getter 。 static defaultProps = {}应该足够了。它不应该考虑传递的 Prop 或其他任何东西。如果是这样，最好使用state

callout

javascript - 流: is not a polymorphic type