解释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 =复选框; 
  

注意 render（）：？ReactElement {} 。这是让我感到困惑的部分。有人可以在哪里了解有关这种语法的更多信息吗？我已经通过谷歌打了很多死路。

解决方案

如果你去package.json的反应表单，并浏览browserify部分：

 browserify：{
transform：[
 [ 
reactify，
 {
es6：true，
target：es5，
stripTypes：true 
} 
] 
] 
}，
  

stripTypes 已启用。它会删除像？ReactElement 这样的东西，这意味着它也许返回一个ReactElement（否则为空或未定义）

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

这些是流式检查器。您还将在应该进行类型检查的所有文件的顶部的注释中看到 @flow 。类型检查器是一种类似工具的单元测试，使您对程序的正确性更加自信，不需要手动测试。在许多情况下，这些小型注释取代我们否则写的单元测试。

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

 <复选框> 
  

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

I'm using a library called react-forms in my React app. To better understand how it works I've been reading the code, but a convention keeps popping up which confuses me. Here's the ES6/JSX code:

'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;

Note render(): ?ReactElement {}. That's the part which is confusing me. Could someone offer guidance on where to learn more about this syntax? I've hit a lot of dead ends via Google.

解决方案

If you go to the package.json of react-forms, and look at the browserify section:

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

stripTypes is enabled. It strips out things like ?ReactElement, which means it maybe returns a ReactElement (and otherwise null or undefined)

The {target: {checked: boolean}} means e has a target property, which has a checked property which is a boolean.

These are hints for the Flow type checker. You'll also see @flow in a comment at the top of all files that should be type checked. A type checker is a tool – like unit tests – that makes you more confident of your program's correctness, in a way that doesn't require manual testing. In many cases those little type annotations replace unit tests we'd otherwise write.

If you use flow in your project and try to do something like:

<Checkbox />

It would give you an type error because value and onChange are required props. Unlike the runtime props check, this happens without actually running the code (often as soon as you save the file).

这篇关于解释ES6 / JSX代码中使用的问号（？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！