Reactjs 如何将React组件呈现到主应用程序组件中/

我正在将客户端代码从jQuery移动到React。我的（修剪过的）主应用程序如下所示

export const MyApp: FC = () => {
return <HashRouter>
    <SideNav {...data} />
    <Switch>
        <Route exact path="/" component={Dashboard} />
    </Switch>
</HashRouter>
}

export const MyApp:FC=（）=>{
返回
}

在几个组件中，我有时需要调用构建React组件的函数。比如

export async function openDialog(recordId?: number) {
const elem = document.createElement('div');
elem.style.display = 'contents';
ReactDOM.render(<ConfigProvider>
    <Modal
        visible recordId={recordId} 
        onCancel={() => {
            ReactDOM.unmountComponentAtNode(elem);
            document.body.removeChild(elem);
        }} 
    />
</ConfigProvider>, elem);
document.body.appendChild(elem);
}

导出异步函数openDialog（记录ID？：编号）{ 常量elem=document.createElement（'div'）； elem.style.display='contents'； ReactDOM.render( { ReactDOM.unmountComponentAtNode（elem）； 文件.body.removeChild（elem）； }} /> ，elem）； 文件.正文.附件（elem）； } 问题是，如果在我的

模式中

我有一个react路由器

链接

，那么我会得到以下错误：

未捕获错误：不变量失败您不应在路由器外部使用链接

现在，我可以理解错误了，因为我在

MyApp

的上下文之外进行渲染。我的问题是：如何更改我的函数，使其呈现到与

MyApp

相同的上下文中

我在网上找不到任何这样的问题或概念（除了重写我的整个应用程序，为我需要打开的每个窗口使用一个状态，这在目前是不实际的）

---

谢谢

使用路由器链接的组件必须是路由器内部呈现的组件的子组件

在您的情况下，您的路由器中只呈现了

和

。确保

由

、

或它们的后代呈现

您还可以直接操作DOM元素，这不是React的好做法。您可能会遇到令人困惑的bug，因为React无法识别对DOM的更改

---

请参阅：

您可以使用Hi。这正是我的问题。“如何”调用React.render（或类似）并引用MyApp，使其作为MyApp的子级进行渲染？谢谢当前呈现模式的是什么？我的函数“openDialog”。我可以给它发一个MyApp的参考资料吗？因此，它在相同的上下文中呈现？@YisroelM.Olewski react门户的存在正是出于这个原因。不需要库。将模态移动到它自己的组件。在仪表板中，有条件地呈现模态。