从顶级应用更改 React 上下文 class

Question

我想在 Typescript 中创建异步对话框（将等待用户交互），我可以从应用程序中的任何位置添加这些对话框。现在从确认对话框开始。我在让它工作时遇到问题，因此 App class 可以以某种方式将新对话框存储到 DialogsContext 并且 Dialogs 组件将在创建新对话框时收到通知。

我想使用我的顶级 App class 的 showConfirmDialog 来处理对话框创建。

请注意 App class 不是实际的 React 组件，我不希望它是。顶层 class 控制最终呈现所有组件的整个应用程序很简单。

我该如何解决这个问题？

export class App {
    public async showConfirmDialog(): Promise<boolean> {
        return new Promise((resolve, reject) => {
            // NOTE: This is not an actual code - unfinished
            // How do I push new dialog into the confirmDialogs array in DialogsContext?
            // confirmDialogs.push(<ConfirmDialog onClick={() => resolve(true)} />);
        });
    }

    public async setup(): Promise<void> {
        const React = await import('react');
        const { render } = await import('react-dom');
        const Dialogs = await import('./components/dialogs');
        const DialogsContext = await import ("./components/context/dialogs-context");

        const app = (
            <DialogsContext.Provider>
                <Dialogs />
            </DialogsContext.Provider>
        );

        const rendered = render(app, document.getElementById('output'));

        return rendered;
    }
}

对话框-context.tsx

const DialogsContext = React.createContext({
    confirmationDialogs: []
});

export default DialogsContext;

对话框-component.tsx

const Dialogs : React.FunctionComponent = props => {
    const dialogs = useContext(DialogsContext);

    return (
        <div key="dialogs" className="dialogs">
            Total dialogs: {dialogs.confirmDialogs.length}

            {dialogs.confirmDialogs.map((dlg: React.ReactElement, i: number) => (
                <div key={i} className="dialog">
                    {dlg}
                </div>
            ))}
        </div>
    );
}

export default Dialogs;

Answer 1

我制作了这个沙箱，按照我的理解来做这些事情。 https://codesandbox.io/s/affectionate-glitter-buj6x

从顶级应用更改 React 上下文 class

Changing the React context from the top-level App class

javascript

typescript

reactjs

react-context

react-hooks