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

【问题标题】：Explain question mark (?) used in ES6/JSX code解释 ES6/JSX 代码中使用的问号 (?)
【发布时间】：2015-03-31 01:57:25
【问题描述】：

我在我的 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 遇到了很多死胡同。

【问题讨论】：

这不是 ES6 语法问题。
@Bergi render(): 是香草 JS 语法吗？ onChange() 也一样？我认为需要像 render: function() {...} 这样的东西。
不是，是的。正如 FakeRainBrigand 回答的那样，: 和以下声明用于类型检查。 render() { … } 是一个 ES6 方法定义。
@Bergi 感谢您对我的回复的耐心等待；我以为您指的是所有代码，而不仅仅是问号……这是我开始的主要问题，对吗？错了。

标签： reactjs ecmascript-6 react-jsx

【解决方案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。类型检查器是一种工具——就像单元测试一样——它可以让你对程序的正确性更有信心，而且不需要手动测试。在许多情况下，这些小类型注释取代了我们原本要编写的单元测试。

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

<Checkbox />

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

【讨论】：