reactjs - Flow : destructuring. React/Preact 中缺少注释

Question

刚刚开始使用 Flow，但似乎无法理解它希望我为解构对象(例如 props)添加类型来做什么

即

render({ count }, { displayHelp }) {

抛出类似的错误

 16:   render({ count }, { displayHelp }) {
              ^^^^^^^^^ destructuring. Missing annotation

当我添加注释时它仍然提示

 17:   render({ count: number }, { displayHelp }) {
              ^^^^^^^^^^^^^^^^^ destructuring. Missing annotation

如果有人能指出的话，我显然在这里遗漏了一些非常简单的东西？

Answer 1

执行 { count: number } 的问题是这与 destructuring assignment 的 ES6 语法冲突。 ，您可以在其中使用 { a: b } = c 以便从 c 获取带有键 a 的值并将其命名为 b，即:

const c = { a: 1 }
const { a: b } = c
//b is now a constant with value 1

目前 Flow 中还没有一个很好的解决方法，但这似乎可行(尽管它很难看):

render({...}: { count: number }, { displayHelp }) {

现在最好的方法似乎是创建一个自定义类型来捕获您的 Prop :

type propsForThisComponent = {
  propA: someType
  propB: anotherType
  ...
}

然后执行:

render(props: propsForThisComponent) {

此类型检查，尽管它强制您以 props.propName 的形式访问所有 Prop 。