从顶级 App 类更改 React 上下文

Question

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

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

请注意，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