Question

如何在Typescript中设置呈现的React组件的类型？例如：我有一些React类：

const Test: React.FunctionComponent<{}> = (): JSX.Element = (
  <div>some text</div>
);

如果我们以以下方式进行控制：

console.log(<Test />)

我们得到的结果如下：

{
  $$typeof: Symbol(react.element),
  ...
  type: {
    name: 'Test'
  }
}

如果我想将此呈现的组件作为prop传递，并且我具有这样的打字稿界面：

interface Props {
  test: JSX.Element | React.ReactNode
}

可以我指定Test组件的呈现结果的类型，例如，这是组件Test的一个实例（我知道JSX.Element不是通用的，它只是一个抽象的示例）：

interface Props {
  test: JSX.Element<Test>
}

Answer 1

您可以定义一个接口并像这样使用它：

// This could be JSX.Element or whatever
interface SomeReactComponent {
  A: string;
} 

interface SomeOtherComponent extends SomeReactComponent {
  B: number;
}

const CompA: SomeReactComponent = { A: "123" };
const CompB: SomeOtherComponent = { A: "123", B: 123 };
const anythingElse: number | string | symbol | object = 1;

const someOtherComponent = (input: SomeOtherComponent) => {
  console.log(input);
};

someOtherComponent(CompA); // Won't compile
someOtherComponent(CompB); // OK
someOtherComponent(anythingElse); // Won't compile either

因此，在您的情况下，extend或React.FunctionComponent<{}>应该可以工作。

一个小陷阱：如果您沿这条路线走，必须确保您的接口不为空或相同。这意味着仅用一个空接口扩展React.Component是行不通的。

带React的Typescript：设置渲染的React组件的类型

1 个答案: