如何在 React TypeScript 中为动态组件动态传递属性？

javascript

2024-03-19 12:45:34

在 React TypeScript 中为动态组件动态传递属性：深入探讨

问题剖析：属性类型定义错误

在 React TypeScript 中，当你使用动态组件进行渲染时，向这些组件传递属性可能会导致属性类型定义错误。这是因为 TypeScript 无法推断出动态组件的确切类型。

解决方案：泛型和类型断言

为了解决此问题，我们需要使用 TypeScript 的泛型和类型断言：

泛型函数： 我们定义一个泛型函数，将动态组件及其属性作为参数。泛型指定了组件类型的类型参数。
类型断言： 在循环中，我们使用类型断言将组件属性的类型显式指定为 T 的属性类型。

步骤详解

使用泛型函数：

const renderDynamicComponents = <T extends React.ElementType>(
  components: {
    component: T;
    props: React.ComponentProps<T>;
  }[]
) => {
  return components.map((cm) => {
    return <cm.component {...cm.props} />;
  });
};

使用类型断言：

renderDynamicComponents(temp);

示例代码

以下示例代码演示了如何使用泛型和类型断言来解决此问题：

interface ButtonProps {
  label?: string;
  variant?:
    | "link"
    | "primary"
    | "icon-only"
    | "borderless"
    | "inline"
    | "cta";
  size?: "xl" | "lg" | "sm" | "md";
}

const Button = (props: ButtonProps) => {
  // ...
};

const renderDynamicComponents = <T extends React.ElementType>(
  components: {
    component: T;
    props: React.ComponentProps<T>;
  }[]
) => {
  return components.map((cm) => {
    return <cm.component {...cm.props} />;
  });
};

const temp = [
  { component: Button, props: { label: "Click Me" } },
];

renderDynamicComponents(temp);