Question

我正在尝试将Flow与draft-js一起使用。

package.json依赖项

...
"dependencies": {
  "draft-js": "^0.9.1",
  "immutable": "^3.8.1",
  "react": "^15.4.2",
  "react-dom": "^15.4.2"
},
"devDependencies": {
  "flow-bin": "^0.37.4"
}

我通过运行flow-typed install安装了flow-typed类型定义。

这是我从draft-js docs中复制的一些略微修改的代码，我试图用flow验证。

index.js

// @flow
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  state: {
    editorState: EditorState
  }

  onChange: Function;

  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});

    // gives type error, as expcted
    let a :string = 10;

    const editorState :EditorState = this.state.editorState;

    // should be a type error, editor.getCurrentContent() returns type ContentState
    const content :string = editorState.getCurrentContent(); 
  }

  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

.flowconfig

[ignore]
.*\/node_modules\/draft-js\/lib\/.*.js.flow.*

[include]

[libs]
.*\/node_modules\/draft-js\/lib\/.*.js.flow.*

[options]
esproposal.class_static_fields=enable
suppress_type=$FlowIssue
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

但是，当我运行flow命令时，我在调用draft-js API时没有出现任何错误。在这里设置流程与草稿一起使用的正确方法是什么？

Answer 1

如果您忽略了.flowconfig中的文件，那么[libs]也会忽略它们，因此您需要从.*\/node_modules\/draft-js\/lib\/.*.js.flow.*删除[ignore]。

为了得到流动和draft-js一起工作我还需要将suppress_comment设置为draft-js中使用的相同值：

[options]
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-8]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\).*\n

Answer 2

当导入为'draft-js'时，Flow无法使用draft-js的原因是：

草案-JS＆＃39;主文件是lib/Draft.js。这意味着import {Editor} from 'draft-js'等于import {Editor} from 'draft-js/lib/Draft.js'。
从Flow版本0.19.0开始，它会处理以.flow结尾的文件（阅读this blog post），草稿js 0.9.1有lib/Draft.js.flow。
- 但没有@flow声明。
（你忽略了.flowconfig）

因此您可以通过将@flow添加到node_modules/draft-js/lib/Draft.js.flow来简要解决此问题。或者分别从Editor和EditorState导入draft-js/lib/DraftEditor.react和draft-js/lib/EditorState。

使用draft-js设置Flow的正确方法

2 个答案: