reactjs - React TypeScript 使用组件的 props 声明接口(interface)

Question

import IntroductionArea from "../components/IntroductionArea";

interface AppSection {
  url: string;
  component: React.FC<any> | React.LazyExoticComponent<React.FC<any>>;
  props?: React.ComponentProps<any>;
}

export const appSections: AppSection[] = [
  {
    url: "/home",
    component: IntroductionArea,
    props: {
      text: "Hello World",
      name: "Foo Bar"
    }
  },
];

你好。我有创建一个对象数组的代码，这些对象接受一个组件和该组件所需的 Prop 。下面的代码是有效的，但不是类型安全的，因为 AppSection 接口(interface)的 props 成员接受 any。我尝试用 typeof component 替换 any 但你不能在声明它的接口(interface)中引用 component。

如何在保持相同功能的同时使此代码类型安全？

谢谢

Answer 1

您需要泛型来使一个值的类型依赖于另一个值类型。

在这种情况下，您需要为组件设置 props 类型。那么让我们从这里开始:

type Component = React.FC<any> | React.LazyExoticComponent<React.FC<any>>

interface AppSection<C extends Component> {
  url: string;
  component: C;
  props?: React.ComponentProps<C>;
}

现在测试一下:

const introSection: AppSection<typeof IntroductionArea> = {
    url: "/home",
    component: IntroductionArea,
    props: {
        text: "Hello World",
        name: "Foo Bar",
        noPropHere: false // Type '{ text: string; name: string; noPropHere: false; }' is not assignable to type '{ text: string; name: string; }'.
    }
}

Playground

很好，我们得到了我们排除的错误，这证明它正在工作。

---

制作一个数组要困难得多。您不能只执行 AppSection[]，因为 AppSection 的通用参数是必需的。所以你可以这样做:

const introSection: AppSection<typeof IntroductionArea> = {
    url: "/home",
    component: IntroductionArea,
    props: {
        text: "Hello World",
        name: "Foo Bar",
        noPropHere: false // error as expected
    }
}

const otherSection: AppSection<typeof OtherArea> = {
    url: "/home",
    component: OtherArea,
    props: {
        other: "Hello World",
    }
}

export const appSections = [introSection, otherSection]

但是如果你尝试渲染这些，你会得到一个类型错误:

const renderedSections = appSections.map(item => {
    const SectionComponent = item.component
    return <SectionComponent {...item.props} />
    // Type '{} | { text: string; name: string; } | { other: string; }' is not assignable to type 'IntrinsicAttributes & { text: string; name: string; } & { other: string; }'.
    //  Type '{}' is missing the following properties from type '{ text: string; name: string; }': text, name(2322)
})

这意味着 typescript 不能保证数组中某个项目的 props 实际上与数组中该项目的组件匹配。

---

最后，React Router对于他们如何处理这个问题是一个很好的引用，因为这里的用例非常相似。它们允许您以两种方式声明路由呈现的内容:

<Route path="/home"><Home /></Route>
<Route path="/other" render={() => <Other />} />

请注意，在这两种情况下，您都是自己渲染组件并传递结果。这样组件就可以只验证它自己的 props 而不需要担心所有这些细节。正如您从上面看到的那样，这让事情变得很多更容易。

在你的情况下可能看起来像:

interface AppSection {
  url: string;
  render(): React.ReactNode;
}

function IntroductionArea(props: {text: string, name: string}) {
    return null
}

function OtherArea(props: {other: string}) {
    return null
}

export const appSections: AppSection[] = [
  { url: '/home', render: () => <IntroductionArea text="Hello, World!" name="Foo Bar"/> },
  { url: '/other', render: () => <OtherArea other="Other text" /> },
];

// Render all sections
const renderedSections = appSections.map(section => section.render())

Playground