1

我正在尝试将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的类型定义。

这是我从 Draft-js 文档中复制的一些稍微修改过的代码，我正在尝试使用 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 时不会出现任何错误。在此处设置流程以与草稿一起使用的正确方法是什么？

4

2 回答 2

1

.flowconfig如果您[libs]忽略.*\/node_modules\/draft-js\/lib\/.*.js.flow.*了[ignore].

为了让 flow 和 draft-js 一起工作，我还需要将 设置为suppress_commentDraft-js 中使用的相同值：

[options]
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-8]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\).*\n
于 2017-03-06T22:42:30.460 回答
0

Flow在导入时不能与draft-js一起使用的原因'draft-js'是：

  • Draft-js 的主文件是lib/Draft.js. 这意味着import {Editor} from 'draft-js'等于import {Editor} from 'draft-js/lib/Draft.js'。
  • .flow从 Flow 版本 0.19.0 开始，它处理以（阅读此博客文章）结尾的文件，而 Draft-js 0.9.1 具有lib/Draft.js.flow.
    • 但它没有@flow声明。
  • （并且您忽略了中的draft-js .flowconfig）

@flow所以你可以通过添加来简单地解决这个问题node_modules/draft-js/lib/Draft.js.flow。或分别导入Editor和EditorState从draft-js/lib/DraftEditor.react和draft-js/lib/EditorState。

于 2017-06-10T03:19:11.860 回答