流程：解构。在React / Preact

Question

刚开始使用Flow但似乎无法理解它是什么让我想要添加用于解构对象的类型，例如道具

即。

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从a获取值c {1}}并将其命名为b，即：

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

目前在Flow中还没有一个很好的解决方法，但这似乎有效（虽然很难看）：

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

现在最好的方法似乎是创建一个捕捉道具的自定义type：

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

然后执行：

render(props: propsForThisComponent) {

这种类型检查，虽然它强迫您以props.propName访问所有道具。

Answer 2

你需要做这样的事情：

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

不幸的是，我不相信有更简洁的方法来做到这一点。

Answer 3

这对我有用

type Props = {
    counter?: number
};

const Component = ({counter}: Props) => (
    <div className="App">
        {counter}
    </div>
);