javascript - 如何正确输入作为函数参数的 React 组件？

Question

我有一个函数，它需要两个参数:一个 react 组件和一个字符串。我试图给他们正确的打字，但是，我很困惑为什么以下内容不起作用......

问题出在函数中使用 GiveComponent 进行类型化。 通过为参数指定 Component<> 的特定类型，GivenComponent(在 < Query/> 内)的返回错误指出以下:

JSX 元素类型“GivenComponent”没有任何构造或调用签名。 [2604]

但是，您如何正确输入该内容？该参数是一个 React 组件，可以是函数组件或类组件。如代码的第二部分所示，参数不是以 < MyComponent/> 形式给出的，而是以 MyComponent 形式给出的 - 所以不是“渲染的”jsx？也许这会改变事情

功能:

基本上获取一个组件并返回它，并在其周围使用更高阶的组件包装器

import React, { Component } from "react";

const withQueryData: Function = (
  GivenComponent: Component<{ data: {} }, any>,
  query: string
) => () => (

  <Query query={gql(query)}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error! {error.message}</p>;

      return <GivenComponent data={data} />;
    }}
  </Query>
);

export default withQueryData;

react 组件:

如何使用参数调用上述函数的示例

class MyComponent extends Component<...removed...> {

  render() {
    return (
      <div>...</div>
    );
  }
}



const MyComponentQuery = `query goes here...`;

const MyComponentWithData = withQueryData(
  MyComponent,
  MyComponentQuery
);

export default MyComponentWithData;

Answer 1

将我的评论转化为答案。

声明的 react 组件有两种类型:

React.ComponentClass - 声明为类的 React 组件的类型:

class SomeComponent extends React.Component {...} // this is React.ComponentClass

React.FunctionComponent 是函数组件的类型(CO 来救援!:D)

const MyFunctionComponent: React.FunctionComponent = props => "something"

因此，如果您的组件是 ComponentClass 或 FunctionComponent 之一，则可以使用 Union Type并以这种方式告诉 TypeScript:

const SomeUnionType: React.ComponentClass | React.FunctionComponent

就是这样!希望这有帮助:)