reactjs - 需要对对象字面量进行注释的流程

Question

假设cx定义为:

var cx = require('classnames');

...我有以下 JSX 代码:

test: function(panelEnabled: boolean) {
    const klass = cx({disabled: !panelEnabled});
    return (<div className={klass}>foo</div>);
},

上述结果导致 Flow 0.35.0 提示以下消息:

app/components/target-resolution.js:20
 20:         const klass = cx({disabled: !panelEnabled});
                              ^^^^^^^^^^^^^^^^^^^^^^^^^ object literal. Could not decide which case to select
 17:     ...classes: Array<$npm$classnames$Classes>
                           ^^^^^^^^^^^^^^^^^^^^^^^ union type. See lib: flow-typed/npm/classnames_v2.x.x.js:17
  Case 2 may work:
    8:   {[className: string]: boolean } |
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/classnames_v2.x.x.js:8
  But if it doesn't, case 3 looks promising too:
    9:   {[className: string]: ?boolean } |
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/classnames_v2.x.x.js:9
  Please provide additional annotation(s) to determine whether case 2 works (or consider merging it with case 3):
   20:         const klass = cx({disabled: !panelEnabled});
                                           ^^^^^^^^^^^^^ not operator

我可以通过以下两种方法之一解决此问题:

丑陋但不会改变方法的API

test: function(panelEnabled: boolean) {
    const klassSpec: {disabled: boolean} ={disabled: !panelEnabled}; 
    const klass = cx(klassSpec);
    return (<div className={klass}>foo</div>);
},

更短但需要更改 API

test: function(panelDisabled: boolean) {
    const klass = cx({disabled: panelDisabled});
    return (<div className={klass}>foo</div>);
},

我已经从 flow-typed 获取了 libdefs流消息(flow-typed/npm/classnames_v2.x.x.js)指向我的文件只有 17 行:

// flow-typed signature: 2dfd96b054f56a84f2d08769019d32d7
// flow-typed version: dc0ded3d57/classnames_v2.x.x/flow_>=v0.23.x_<=v0.27.x

type $npm$classnames$Classes =
  string |
  // We need both of these because if we just have the latter it won't accept objects typed
  // explicitly as the former, due to mutation concerns.
  {[className: string]: boolean } |
  {[className: string]: ?boolean } |
  Array<string> |
  false |
  void |
  null

declare module 'classnames' {
  declare function exports(
    ...classes: Array<$npm$classnames$Classes>
  ): string;
}

我的问题是:

1. 此消息的原因和意义是什么？
2. 处理这个问题的正确方法是什么？
3. 为什么 Flow 不清楚如果 panelEnabled 是 boolean 那么 !panelEnabled 也是 boolean。

Answer 1

您似乎安装了错误版本的classnames定义文件。

如果您在定义文件中看到注释行

// flow-typed version: dc0ded3d57/classnames_v2.x.x/flow_>=v0.23.x_<=v0.27.x

表示该定义文件兼容 flow >= 0.23 至 flow 0.27。

也许您使用的是过时版本的流程类型？尝试使用 npm install -g flow-typed 更新它。

我从头开始启动了一个项目来测试您的代码，它工作正常。这是我的 package.json:

{
  "name": "flow-classnames",
  "scripts": { "flow": "flow" },
  "dependencies": {
    "classnames": "^2.2.5"
  },
  "devDependencies": {
    "flow-bin": "^0.35.0"
  }
}

这是我的 index.js

// @flow

const cx = require('classnames');

const test = function(panelEnabled: boolean) {
  const klass = cx({disabled: !panelEnabled});
  return (<div className={klass}>foo</div>);
}

测试步骤:

npm install
flow-typed install
npm run flow

没有错误!