Giải thích dấu chấm hỏi (?) Được sử dụng trong mã ES6/JSX

Question

Tôi đang sử dụng thư viện có tên là các biểu mẫu phản ứng trong ứng dụng React của mình. Để hiểu rõ hơn về cách thức hoạt động của nó, tôi đã đọc mã, nhưng một quy ước cứ bật lên làm tôi bối rối. Đây là mã 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; 

Lưu ý render(): ?ReactElement {}. Đó là phần khiến tôi bối rối. Ai đó có thể cung cấp hướng dẫn về nơi để tìm hiểu thêm về cú pháp này? Tôi đã đánh rất nhiều kết thúc chết thông qua Google.

Answer 1

Nếu bạn đi đến package.json của phản ứng-hình thức, và nhìn vào phần browserify:

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

stripTypes được kích hoạt. Nó dải ra những thứ như ?ReactElement, có nghĩa là nó maybe trả về một ReactElement (và nếu không null hoặc không xác định)

Các {target: {checked: boolean}} nghĩa e có một tài sản mục tiêu, trong đó có một tài sản kiểm tra mà là một boolean.

Đây là các gợi ý cho số Flow type checker. Bạn cũng sẽ thấy @flow trong nhận xét ở đầu tất cả các tệp cần được đánh dấu chọn. Trình kiểm tra loại là công cụ kiểm tra đơn vị giống như công cụ - giúp bạn tự tin hơn về tính chính xác của chương trình, theo cách không yêu cầu kiểm tra thủ công. Trong nhiều trường hợp, những chú thích loại nhỏ này thay thế các bài kiểm tra đơn vị mà chúng ta viết khác.

Nếu bạn sử dụng dòng chảy trong dự án của bạn và cố gắng làm điều gì đó như:

<Checkbox /> 

Nó sẽ cung cấp cho bạn một lỗi loại bởi vì giá trị và onChange được yêu cầu đạo cụ. Không giống như kiểm tra đạo cụ thời gian chạy, điều này xảy ra mà không thực sự chạy mã (thường là ngay khi bạn lưu tệp).