reactjs - 允许将对象（用于 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键。leaveleaveActive

但是，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,
  }),
]);

在您的情况下，您错过了所需的appearandappearActive道具。

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