[Flow]使用装饰器@connect：在React元素的道具中找不到属性

Question

Child1.js

// @flow
type Props = {
  prop1: string,
}
class Child1 extends Component<void, Props, void> {
  ...
}
export default connect(state -> state.child1)(Child1);

Child2.js

// @flow
type Props = {
  prop1: string,
}
@connect(state => state.child2)
export default class Child2 extends Component<void, Props, void> {
  ...
}

Parent.js

// @flow
export default class Parent extends Component<void, void, void> {
  render() {
    return (
      <View>
        <Child1 /> // no flow error
        <Child2 /> // flow error: property 'props1' property not found in props of React element Child2
      </View>
    );
  }
}

我已将esproposal.decorators=ignore添加到.flowconfig - ＆gt; [选项]。

如何解决上面的流量错误？

Answer 1

解决方法

Child2.js

// @flow
type Props = {
  dispatch: Function,
  prop: string,
}

type DefaultProps = Props;

@connect(state => state.child2)
export default class Banner extends React.Component<DefaultProps, Props, void> {
  static defaultProps = {
    dispatch: () => {},
    prop: '',
  }
  ...
}

然后在Parent.js中，Child2不会带来任何流错误。

老实说，DefaultProps对我来说是不必要的...... 除非有更方便/一般的解决方案，否则我不会关闭这个问题。