Пытаюсь использовать React и Flow с синтаксисом ES6 и получаю ошибку:
line 9 col 3 React element: Hello - Error:
в файле app.jsx:
/* @flow */
var React = require('react');
var Hello = require('../src/components_flow/hello/hello');
//var Input = require('../src/components_flow/input/input');
//React.renderComponent(<Hello name="World" />, document.getElementById('react-container'));
React.render(
<Hello name="World"/>,
document.getElementById('react-container'));
hello.jsx:
/* @flow */
var React = require('react');
class Hello extends React.Component {
render(): any {
return <div>Hello {this.props.name}</div>;
}
}
module.exports = Hello;
gulp task:
gulp.task('react', function () {
return gulp.src([
'./src/components_flow/hello/hello.jsx',
'./src/components_flow/input/input.jsx',
'./src/app.jsx'],
function (er, files) {
// files is an array of filenames.
// If the `nonull` option is set, and nothing
// was found, then files is ["**/*.js"]
// er is an error object or null.
//console.log(files);
})
.pipe(flow({
all: false,
weak: false,
killFlow: false,
beep: false,
abort: false //abort the gulp task after the first Typecheck error
}))
.pipe(react({stripTypes: true, harmony: true}))
.pipe(gulp.dest(function(file) {
return file.base;
}));
});
Подробности
в данной ветке репозитория:
https://github.com/RinatMullayanov/react-typescrip...
Чтобы увидеть данную ошибку в консоли нужно набрать:
gulp react
После некоторого гугления я к пришел к тому что для того чтобы ошибка исчезла писать нужно примерно так:
/* @flow */
var React = require('react');
type HelloProps = {
name: string
};
class Hello extends React.Component {
static propTypes: { name: string };
static defaultProps: { name: string };
constructor(props: HelloProps) {
super(props);
}
render(): any {
return <div>Hello {this.props.name}</div>;
}
}
module.exports = Hello;
И это работает.
Объясните, пожалуйста, почему так нужно делать(почему требуется объявлять propTypes и defaultProps)?
Это какие-то тонкости реализации поддержки ES6 в React?
Простой