Why are these errors showing with flow
. I'm using React with ES6 classes. Code example is below:
UPDATE
I almost got this working based on this example: https://flowtype.org/docs/react.html#defining-components-as-react-component-subclasses
I got rid of most of the Flow errors, but now app fails when run it. I think this is ReactJS not stripping out the Flow or Babel class stuff. If I comment out the Flow type defs in my code below I don't get this error.
I'm running my app with watchify -t [ babelify ] app.js -o ./build/app.js
SyntaxError: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js: Missing class properties transform. while parsing file: /Users/carlf/Documents/dev/reactjs/FlyTweet/app/views/posts/MyNewPostForm.js
Flow Errors:
app/views/posts/MyNewPostForm.js:51 51: var myPostTxt = ReactDOM.findDOMNode(this.Refs.content).value; ^^^^ property
Refs
. Property not found in 15: export default class MyNewPostForm extends React.Component { ^^^^^^^^^^^^^ MyNewPostForm
From 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"
}
React Component
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.
}
May be the only flow error is capital R in Refs
?
It is in lower case in code you provided, but in the error message it is capital.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With