Question

我将子代作为函数传递，将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);会显示错误：

无法调用类型缺少调用签名的表达式。输入'string |编号布尔| {} | ReactElement ReactElement组件）> | null）| （新（属性：任意）=>组件）> | ReactNodeArray | ReactPortal'没有兼容的呼叫签名。

如果我在type Props中将孩子明确指定为any，则一切正常，但从打字稿和类型角度来看，这是错误。

当传递返回props.children的函数而不是React.ReactNode本身时，应该为React.ReactNode放置什么类型，因此Typescript将其接受为有效的“ Render函数”并可以调用类似函数的children？

Answer 1

您可以将子类型指定为返回ReactNode的函数

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

Answer 2

JSX.Element也可以是类型，以防子代是“ DOM元素”。

对于React的子级函数，正确的类型是什么？

2 个答案: