解释问号(?)在ES6/JSX代码中使用

Question

我在我的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 {}。这就是让我困惑的地方。有人能给我们提供更多关于这个语法的指导吗？我在谷歌上碰到了很多死胡同。

Answer 1

如果您转到react forms的package.json，并查看browserify部分：

  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true,
          "target": "es5",
          "stripTypes": true
        }
      ]
    ]
  },

启用了stripTypes。它去掉了像?ReactElement这样的东西，这意味着maybe返回一个ReactElement (否则为null或未定义)。

{target: {checked: boolean}}意味着e有一个目标属性，它具有一个已检查的属性，它是一个布尔值。

这些都是Flow type checker的提示。您还将在所有应该进行类型检查的文件顶部的注释中看到@flow。类型检查器是一种类似于工具的单元测试，它以一种不需要手动测试的方式使您对程序的正确性更有信心。在许多情况下，这些小类型注释取代了我们本来会编写的单元测试。

如果在项目中使用flow并尝试执行以下操作：

<Checkbox />

它会给您一个类型错误，因为值和onChange是必需的道具。与运行时道具检查不同，这是在没有实际运行代码的情况下发生的(通常是在保存文件之后)。