解释 ES6/JSX 代码中使用的问号 (?)
Posted
技术标签:
【中文标题】解释 ES6/JSX 代码中使用的问号 (?)【英文标题】:Explain question mark (?) used in ES6/JSX code 【发布时间】: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 语法问题。 @Bergirender():
是香草 JS 语法吗? onChange()
也一样?我认为需要像 render: function() ...
这样的东西。
不是,是的。正如 FakeRainBrigand 回答的那样,:
和以下声明用于类型检查。 render() …
是一个 ES6 方法定义。
@Bergi 感谢您对我的回复的耐心等待;我以为您指的是所有代码,而不仅仅是问号……这是我开始的主要问题,对吗?错了。
【参考方案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 检查不同,这发生在没有实际运行代码的情况下(通常在您保存文件后)。
【讨论】:
以上是关于解释 ES6/JSX 代码中使用的问号 (?)的主要内容,如果未能解决你的问题,请参考以下文章