如何将手动接口构造从 React tsx 转换为 React jsx？

问题描述

这里描述了如何在 React 应用程序中创建全局使用的模态对话框 https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe 这是代码和框 https://codesandbox.io/s/neat-dialogs-3h5ou?from-embed=&file=/src/ConfirmationService.tsx

此示例使用 tsx 格式。

ConfirmationDialog.tsx 包含接口的导出：

export interface Confirmationoptions {
  catchOnCancel?: boolean;
  variant: "danger" | "info";
  title: string;
  description: string;
}

并且这个接口在ConfirmationService.tsx导入中使用：

const ConfirmationServiceContext = React.createContext<
  (options: Confirmationoptions) => Promise<void>
>(Promise.reject);

AFAIK jsx 不包含 interface 结构，而且 jsx 也不包含结构 React.createContext<...>（带角括号）。

我的问题是 - 如何将这个接口和这个接口的使用（在 createContext(...) 中）从 tsx 代码转换为 jsx 代码？

解决方法

您的示例中似乎使用了 Typescript 的两个功能：接口和通用（ 括号内的东西）。因此，要转换为 JSX，您不需要像这样导入/声明接口并删除通用部分：

const ConfirmationServiceContext = React.createContext(Promise.reject);