允许将对象(用于CSS模块)传递到ReactCSSTransitionGroup以进行流验证

Question

我使用的是ReactCSSTransitionGroup、CSS模块和Flow。

<ReactCSSTransitionGroup
  transitionName={{
    enter: slideTransition.enter,
    enterActive: slideTransition.enterActive,
    leave: slideTransition.leave,
    leaveActive: slideTransition.leaveActive,
  }}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}
>
  { /* ... */ }
</ReactCSSTransitionGroup>

因为我使用的是CSS模块，所以我必须向enter、enterActive、leave和leaveActive传递一个对象的键。

但是，对该文件的flow检查告诉我以下内容：

src/components/Category.jsx:153
153:           transitionName={{
                               ^ object literal. This type is incompatible with
 14:     transitionName: string | ReactCSSTransitionGroupNames,
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ union: string | ReactCSSTransitionGroupNames. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Member 1:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                           ^^^^^^ string. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Error:
  153:           transitionName={{
                                 ^ object literal. This type is incompatible with
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                           ^^^^^^ string. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Member 2:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ReactCSSTransitionGroupNames. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Error:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `appear`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  153:           transitionName={{
                                 ^ object literal

有没有一种方法可以让这个错误消失，或者在使用CSS模块的同时传递正确的类型？

Answer 1

transitionName使用严格的类型列表：

export const nameShape = React.PropTypes.oneOfType([
  React.PropTypes.string,
  React.PropTypes.shape({
    enter: React.PropTypes.string,
    leave: React.PropTypes.string,
    active: React.PropTypes.string,
  }),
  React.PropTypes.shape({
    enter: React.PropTypes.string,
    enterActive: React.PropTypes.string,
    leave: React.PropTypes.string,
    leaveActive: React.PropTypes.string,
    appear: React.PropTypes.string,
    appearActive: React.PropTypes.string,
  }),
]);

在您的例子中，您错过了所需的appear和appearActive属性。

flow还通过以下几行通知您：

  Error:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `appear`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  153:           transitionName={{
                                 ^ object literal