我在我的React应用程序中使用了一个名为react-forms的库.为了更好地理解它是如何工作的,我一直在阅读代码,但是一个常规不断弹出来,使我感到困惑.这是ES6 / JSX代码：
'use strict';
var React = require('react/addons');
var cx = React.addons.classSet;
var CheckBox = React.createClass({
propTypes: {
/...code.../
},render(): ?ReactElement {
/...code.../
},onChange(e: {target: {checked: boolean}}) {
/...code.../
}
});
module.exports = CheckBox;
注意render()：？ReactElement {}.这是让我感到困惑的部分.有人可以在哪里了解有关这种语法的更多信息吗？我通过Google打死了很多死胡同.
解决方法
如果你去package.json的反应表单,看看browserify部分：
"browserify": {
"transform": [
[
"reactify",{
"es6": true,"target": "es5","stripTypes": true
}
]
]
},
stripTypes被启用.它会删除像ReactElement这样的东西,这意味着它会返回一个ReactElement(否则为null或undefined)
{target：{checked：boolean}}表示e具有目标属性,该属性具有布尔值的checked属性.
这些是Flow type checker的提示.您还将在所有应该进行类型检查的文件的顶部的注释中看到@flow.类型检查器是一种类似工具的单元测试,使您对程序的正确性更加自信,不需要手动测试.在许多情况下,这些小型注释取代我们否则写的单元测试.
如果您在项目中使用流程,并尝试执行以下操作：
<CheckBox />
它会给你一个类型错误,因为value和onChange是必需的道具.与运行时道具检查不同,这种情况发生在没有实际运行的代码(通常一旦你保存文件).
