Typescript 中动态 React 组件的条件类型

Question

试图创建一个动态的 React 组件。根据所选组件有条件地传递正确 propType 的正确方法是什么。到目前为止，这是我在<SelectComponent {...props.props} /> 这一行上遇到的错误，因为道具与组件不匹配：

export interface SidebarProps {
    type: keyof typeof components,
    props: AddEditJobsProps | AddEditCustomersProps
}

const components = {
  job: AddEditJobs,
  customer: AddEditCustomers
};

export default function Sidebar(props: SidebarProps) {
  const { open, toggle } = useToggle();
  const SelectComponent = components[props.type];

  return (
    <RightSidebar open={open} toggleDrawer={toggle}>
      <SelectComponent {...props.props} />
    </RightSidebar>
  );
}

编辑： 将 any 添加到 props 可修复错误，但 Typescript 将无法匹配所选的 type 与相应的 props 在类型检查期间这是我希望在这里完成的。

export interface SidebarProps {
    type: keyof typeof components,
    props: AddEditJobsProps | AddEditCustomersProps | any
}

Answer 1

如果您坚持以这种方式保持动态，那么您可能应该这样做。

正如我在评论中提到的，第一个问题是 TS 直到运行时才知道 props.type 的值是什么，因此它无法有效地提前推断出它应该是什么。为了解决这个问题，你需要一个简单的旧条件，它将显式呈现正确的组件：

export const Sidebar: React.FC<SidebarProps> = props => {
  const { open, toggle } = useToggle();

  let inner: React.ReactNode;
  if (props.type === "job") {
    inner = <AddEditJobs {...props.props} />;
  } else if (props.type === "customer") {
    inner = <AddEditCustomers {...props.props} />;
  }

  return (
    <RightSidebar open={open} toggleDrawer={toggle}>
      {inner}
    </RightSidebar>
  );
};

请注意，条件基本上断言该字段的值将是什么，这有助于 TS 推断形状的其余部分将是什么并改进代码时类型检查。

第二个问题是SidebarProps 的接口过于宽松。

你有这个：

export interface SidebarProps {
    type: keyof typeof components,
    props: AddEditJobsProps | AddEditCustomersProps
}

这基本上是在告诉 Typescript“该对象应该有一个与 components 中的一个键匹配的 type 字段，以及一个 props 字段是 AddEditJobsProps 或 AddEditCustomersProps”。但它没有指定如果type 等于"job" 则props 字段必须 匹配AddEditJobsProps。为此，您需要更明确地说：

export type SidebarProps =
  | {
      type: "job";
      props: AddEditJobsProps;
    }
  | { type: "customer"; props: AddEditCustomersProps };

这使用联合类型来确保SidebarProps 具有一个或另一个完整且有效的形状。

通过这些更改，不仅Sidebar 中的 TS 错误消失了，而且当您在另一个组件中渲染它时，您将获得预期的正确 TS 检查。如果type 是"job" 但props 属性不具有AddEditJobsProps 的预期形状，您将收到错误消息。在这个沙盒中亲自尝试一下：

https://codesandbox.io/s/youthful-fog-8lq41

Answer 2

我认为答案是您的“动态组件”模式让事情变得困难。人类和计算机都难以理解，导致代码难以阅读和维护，Typescript编译器无法准确检查。

在这里使用的更好的模式是组件组合。使 <Sidebar> 更通用，这样它就不会关心它呈现什么子元素，而只处理打开/切换状态。

export default const Sidebar: React.FC = ({children}) => {
  const { open, toggle } = useToggle();

  return (
    <RightSidebar open={open} toggleDrawer={toggle}>
      {children}
    </RightSidebar>
  );
}

然后，当你想渲染一个侧边栏时，你只需给它你想要它包装的孩子：

<Sidebar>
  <AddEditJobs {...addEditJobsProps} />
</Sidebar>

// or

<Sidebar>
  <AddEditCustomers {...addEditCustomersProps} />
</Sidebar>

您将获得准确而严格的类型检查（因为 TS 会知道组件和 props 的确切类型），并且您的代码结构将更具可读性和易于遵循。