如何将（手动）接口构造从 React tsx 翻译成 React jsx？答案

【问题标题】：How to translate (manually) interface construction from React tsx to React jsx?如何将（手动）接口构造从 React tsx 翻译成 React jsx？
【发布时间】：2021-09-16 06:18:03
【问题描述】：

这里描述了如何在 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 代码？

【问题讨论】：

标签： reactjs typescript jsx tsx

【解决方案1】：

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

不需要导入/声明接口，并且
删除通用部分，如下所示：

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

【讨论】：