Question

使用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}）=＆gt; （
     可更新的
update。找不到物业   <UpdateContainer toRender={Edit} />

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

Answer 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> }以反映这一点（并将界面切换为前面提到的类型，我不确定是否需要它，它只是我知道的方式。）

我希望这会有所帮助。

Flow - 基于反应组件的道具定义界面

1 个答案: