Question

我正在尝试弄清楚如何将Flow.js类型与compound React components.

一起使用

例如，假设我有这样的组件A：

type Props = {title: string};
const A = ({title}: Props) => <span>{title}</span>;

并且TitleProvider喜欢这样：

const TitleProvider = () => {
  return React.cloneElement(this.props.children, {
    title: 'Foo',
  });
};

然后我将这两个组件用作复合组件，如下所示：

<TitleProvider>
  <A />
</TitleProvider>

这将失败，因为对React.createElement的初始调用将创建A组件而没有所需的title道具。

我想继续使用复合组件（我不想传递组件类或使用渲染道具）。我还希望A的标题支持按要求保留（我不希望类似{title?: string}）。

有没有办法实现这个目标？

Answer 1

您可以尝试使用React Hooks和Context API-s。

创建上下文提供程序：

// @flow
import * as React from "react";

export const TitleContext: React.Context<{
    title: string
}> = React.createContext({
    title: string
});

const TitleProvider = (props: {children: React.Node}) => {
  return <TitleContext.Provider value={{title: "Foo"}}>
      {props.children}
  <TitleContext.Provider>
};

接下来，创建一个使用TitleProvider的A：

// @flow
import * as React from "react";
import {TitleContext} from "...";

const A = () => {
    const {title} = useContext(TitleContext); // flow infer type 'string' for title
    return <span>{title}</span>
};

最后，复合TitleProvider和A：

<TitleProvider>
  <A />
</TitleProvider>

将Flow.js与React复合组件一起使用

1 个答案: