如何使用屬性指定組件的打字稿類型

Question

我有一個組件SampleComponent.tsx ：

import React from 'react';

type Props = { text: string };

export const SampleComponent: React.FC<Props> = ({text})=><div>{text}</div>;

SampleComponent.variant1 = ({text})=><div>{'variant1' + text}</div>;

當我嘗試在其他組件中使用SampleComponent.variant1時，出現打字稿錯誤：

Property 'variant1' does not exist on type ...

現在我只是使用as類型轉換，但我認為有更好的方法。

我怎樣才能解決這個問題？

編輯：如果我有動態變體，如何輸入 - 從 1 到 4 這樣 - .variant1 , .variant2 , .variant3和.variant4

Answer 1

由於您已經說過 Sample Component 是一個 FC，因此 react 不會讓您添加任何不屬於 FC 的屬性。 您可以擴展您將 SampleComponent 聲明為的類型，如下所示：

export const SampleComponent: React.FC<Props> & {
  variant1: React.FC;
} = ({ text }) => <div>{text}</div>;

SampleComponent.variant1 = ({ text }) => <div>{"variant1" + text}</div>;

或者你可以為 props 提供類型，然后讓 typescript 通過你使用它的方式找出其余的：

const SampleComponent = ({ text }: Props) => <div>{text}</div>;

SampleComponent.variant1 = ({ text }: Props) => <div>{"variant1" + text}</div>;