[流程]使用装饰器@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 -> [选项]。

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

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 对我来说有点不必要...除非有更多 convenient/general 解决方案，否则我不会关闭这个问题。