Question

我将流类型检查添加到代码库。我已经能够解决大多数问题，但是我已经挂断了组件使用两个高阶组件抛出的错误。可以找到问题的工作回购here，但有问题的简化组件如下所示：

// @flow

import * as React from 'react'
import { withRouter } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'

type Props = {
  content: string,
  classes: {
    [string]: string,
  },
}

class Button extends React.Component<Props> {
  render () {
    return (
      <button className={this.props.classes.main}>
        {this.props.content}
      </button>
    )
  }
}

export default withStyles({
  main: {
    background: 'red',
  }
})(withRouter(Button))

我看到的错误：

$ flow
Launching Flow server for /Users/flow-react-router-dom-test
Spawned flow server (pid=79843)
Logs will go to /private/tmp/flow/XXXXXXXflow-react-router-dom-test.log
Library type error:
flow-typed/npm/react-router-dom_v4.x.x.js:144
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. This type is incompatible with
 14: class Button extends React.Component<Props> {
                                          ^^^^^ object type. See: src/Button.js:14
  Property `classes` is incompatible:
     19:           <Button content="click me" />
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with. See: src/App.js:19
                    v
      9:   classes: {
     10:     [string]: string,
     11:   },
           ^ object type. See: src/Button.js:9

Library type error:
flow-typed/npm/react-router-dom_v4.x.x.js:144
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. This type is incompatible with
 14: class Button extends React.Component<Props> {
                                          ^^^^^ object type. See: src/Button.js:14
  Property `content` is incompatible:
     19:           <Button content="click me" />
                                   ^^^^^^^^^^ undefined. This type is incompatible with. See: src/App.js:19
      8:   content: string,
                    ^^^^^^ string. See: src/Button.js:8

Error: src/App.js:19
 19:           <Button content="click me" />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Button`
 19:           <Button content="click me" />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `Button`. Inexact type is incompatible with exact type
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-router-dom_v4.x.x.js:144

如果我独立使用任何一个HOC，则不会报告错误。

或者，如果我在flow-react-router-dom-test/flow-typed/npm/react-router-dom_v4.x.x.js中编辑模块定义以删除确切的对象定义，则它会通过。所以：

declare export function withRouter<P>(
-  Component: React$ComponentType<{ ...ContextRouter, ...P }>
+  Component: React$ComponentType<{| ...ContextRouter, ...P |}>
): React$ComponentType<P>;

关于我做错的任何想法？

具有流量的多个React HOC

0 个答案: