reactjs – 解释ES6 / JSX代码中使用的问号(？)

我在我的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是必需的道具.与运行时道具检查不同,这种情况发生在没有实际运行的代码(通常一旦你保存文件).