如何将界面构造从 React tsx 翻译（手动）到 React jsx？

Question

这里描述了如何在 React 应用程序中创建全局使用的模态对话框 https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe 这里是codesandbox 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 代码？

Answer 1

您的示例中似乎使用了 Typescript 的两个功能：接口和通用（<> 括号内的内容）。因此，要转换为 JSX，您将：

• 不需要import/declare接口，
• 删除通用部分，如下所示：

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