Flow - 基于 props 为 react 组件定义接口答案

【问题标题】：Flow - Defining interface based on props for a react componentFlow - 基于 props 为 react 组件定义接口
【发布时间】：2017-06-05 22:09:51
【问题描述】：

使用 Flow，我希望能够为功能性反应组件指定一个接口，该接口定义了该组件作为属性的一些方法。

我希望包装组件能够在实现这些属性的子组件上设置这些属性。

这是我现在拥有的代码：

interface Updateable {
  update(string): void
};

const Edit = ({
  update
}: {
  update: string => void
}) => <a onClick={e => update(e.target.value)}>Something</a>

const UpdateContainer = ({ toRender }: { toRender: Updateable } ) => (
  <toRender update={message => alert(message)} />
)

const Wrapper = (
    <UpdateContainer toRender={Edit} />
);

这给了我错误：

const UpdateContainer = ({ toRender }: { toRender: Updateable } ) => (

update 的可更新。未找到的属性 <UpdateContainer toRender={Edit} />

如何根据 React 组件属性指定接口？或者除了我应该使用的接口之外还有其他东西吗？

【问题讨论】：

标签： reactjs flowtype

【解决方案1】：

Playground

type Updateable = {
  update: (value: string) => void
};

const Edit = ({
  update
}: Updateable ) => <a onClick={e => update(e.target.value)}>Something</a>

const Foo = ({
  foo
}: {
  foo: string => void
}) => <a onClick={e => foo(e.target.value)}>Something</a>

const UpdateContainer = ({ toRender }: { toRender: (props: Updateable) => React$Element<any> }) => (
  <toRender update={message => alert(message)} />
)

const Wrapper1 = (
    <UpdateContainer toRender={Foo} />
);

const Wrapper2 = (
    <UpdateContainer toRender={Edit} />
);

使用此代码，Wrapper1 会生成错误，但 Wrapper2 不会。我将接口切换为一种类型，因为我对 flowtype 中的接口不是很熟悉。

至于问题，问题是这部分{ toRender: Updateable }。

{ toRender: Updateable } 声明 toRender 是实现可更新的东西，但是在传递Edit 时情况并非如此。

Edit 是一个接受参数props 的函数，它是那些实现Updateable 的道具。

我将代码更改为 { toRender: (props: Updateable) => React$Element<any> } 以反映这一点（并将接口切换为前面提到的类型，我不确定是否需要，这只是我知道的方式）。

我希望这会有所帮助。

【讨论】：