React 的 children as 函数的正确类型是什么？

Question

我将 children 作为函数传递，将 React.ReactNode 返回到 Provider HOC，如下所示：

<Provider variables={{ id: "qwerty" }}>
  {data => (
    <ExampleComponent data={data} />
  )}
</Provider>

这是提供程序组件示例代码：

type Props = {
  id: string;
  children: any; // What type should be put here?
};

const Provider: React.SFC<Props> = ({ id, children }) => {
  const { data, loading, error } = useQuery<req, reqVariables>(query, {
    variables: { id }
  });

  if (loading) return "Loading...";
  if (error) return "Error";
  if (!data) return "No data";

  return children(data);
}

如果我没有为 children 指定任何类型，因此将其默认为 React.ReactNode，那么第 return children(data); 行会显示错误：

Cannot invoke an expression whose type lacks a call signature. Type 'string | number | boolean | {} | ReactElement ReactElement Component)> | null) | (new (props: any) => Component)> | ReactNodeArray | ReactPortal' has no compatible call signatures.

如果我在 type Props 中明确指定 children 为 any，一切正常，但它是 Wrong 来自 Typescript 和类型视角。

什么是 props.children 的正确类型，当传递返回 React.ReactNode 的函数而不是 React.ReactNode 本身时，Typescript 会接受它作为有效的 "Render function" 并允许调用 children 之类的函数?

Answer 1

您可以将子类型指定为 returns 一个 ReactNode

的函数

type Props = {
  id: string,
  children: (props: InjectedCounterProps) => React.ReactNode
};

Answer 2

JSX.Element 也可以是类型，如果 children 是 'DOM element'。

React 的 children as 函数的正确类型是什么？

What is proper type for React's children as function?

children

typescript

reactjs