【问题标题】:Errors with Flow, ReactJS and ES6 classesFlow、ReactJS 和 ES6 类的错误
【发布时间】:2016-10-04 05:09:07
【问题描述】:

为什么flow 会显示这些错误。我将 React 与 ES6 类一起使用。代码示例如下:

更新

根据这个例子,我几乎得到了这个工作: https://flowtype.org/docs/react.html#defining-components-as-react-component-subclasses

我消除了大部分 Flow 错误,但现在应用程序在运行时失败。我认为这是 ReactJS 没有剥离 Flow 或 Babel 类的东西。如果我在下面的代码中注释掉 Flow 类型定义,我不会收到此错误。

我正在使用watchify -t [ babelify ] app.js -o ./build/app.js 运行我的应用程序

语法错误: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js: 缺少类属性转换。解析文件时: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js

流错误:

app/views/posts/MyNewPostForm.js:51 51: var myPostTxt = ReactDOM.findDOMNode(this.Refs.content).value; ^^^^ 属性Refs。 15 中未找到属性:导出默认类 MyNewPostForm 扩展 React.Component { ^^^^^^^^^^^^^MyNewPostForm

来自 package.json

  "dependencies": {
    "babel-preset-react": "6.5.0",
    "babelify": "7.3.0",
    "react": "15.1.0",
    "react-dom": "15.1.0",
    "react-router": "2.4.1"
  }

反应组件

export default class MyNewPostForm extends React.Component {

  // START Flow type definitions.
  MAX_POST_CHARS: number; 

  state: {
      charsRemaining: number,
      SendButtonDisabled: boolean
  };

  handleChange: () => void;
  onSubmit: () => void;
  // END Flow type definitions.

  constructor() {
    super();

    this.MAX_POST_CHARS = 139;

    this.state = {
        charsRemaining: this.MAX_POST_CHARS,
        SendButtonDisabled: true
    };

   this.handleChange = this.handleChange.bind(this);    
   this.onSubmit = this.onSubmit.bind(this);    

  }

  handleChange() {
     var myPostTxt = ReactDOM.findDOMNode(this.refs.content).value;

     // Do something here.
  }

【问题讨论】:

  • 使用流创建组件时,您必须在类声明中提供类型参数来描述您的道具、默认道具和状态的类型。 Here's a useful article
  • 我在这里关注官方 Flow / React ES6 示例,但也无法正常工作:flowtype.org/docs/…
  • 另外,让我感到厌烦的是,在 JS 文件上运行非 React 流直到添加类型注释后才会显示任何错误。但是对于 React ES6,它迫使我添加类型注释。

标签: javascript reactjs flowtype


【解决方案1】:

Refs 中唯一的流错误可能是大写 R? 在您提供的代码中它是小写的,但在错误消息中它是大写的。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-11
  • 2021-11-22
  • 2016-10-25
  • 1970-01-01
相关资源
最近更新 更多