Question

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

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

请注意，App类不是是一个实际的反应组件，我不希望这样。这是一个简单的顶级类，它控制整个应用程序，最终最终会呈现所有组件。

我该如何解决？

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;
    }
}

dialogs-context.tsx

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

export default DialogsContext;

dialogs-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

从顶级App类更改React上下文

1 个答案: