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

Question

以下是如何在React应用程序中创建全局使用的模态对话框的描述https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe这是codesandboxhttps://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<...>(具有角度braackets(。

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

Answer 1

示例中似乎使用了Typescript的两个功能：Interface和Generic(位于<>括号内的东西(。因此，要转换为JSX，您将：

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

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