Question

假设for item in result: temp = {"Tags": item["Value"], "VirtualizationType": item["VirtualizationType"]} output.append(temp)被定义为：

cx

...我有以下JSX代码：

var cx = require('classnames');

以上结果在Flow 0.35.0中抱怨以下消息：

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

我可以使用以下两种方法之一解决此问题：

丑陋但不会改变方法的API

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>);
},

我从flow-typed获得了libdef，并且流式消息（test: function(panelDisabled: boolean) { const klass = cx({disabled: panelDisabled}); return (<div className={klass}>foo</div>); },）指向的文件只有17行：

flow-typed/npm/classnames_v2.x.x.js

我的问题是：

这条消息的原因和意义是什么？
处理此问题的正确方法是什么？
如果// 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; }为panelEnabled，那么为什么流量不明确，那么boolean也是布尔值。

Answer 1

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

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

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

表示此定义文件与flow＆gt; = 0.23兼容，流量为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

没有错误！

需要在对象文字上进行注释的流程

丑陋但不会改变方法的API

更短但需要更改API

1 个答案: