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

Explain question mark (?) used in ES6/JSX code

我在我的 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.

遇到了很多死胡同

如果你去 react-forms 的 package.json,看看 browserify 部分:

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

stripTypes 已启用。它去掉了像 ?ReactElement 这样的东西,这意味着它 maybe returns 一个 ReactElement(否则为 null 或 undefined)

{target: {checked: boolean}} 表示 e 有一个目标 属性,它有一个已检查的 属性,它是一个布尔值。

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

如果您在项目中使用流程并尝试执行以下操作:

<Checkbox />

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