如何将 React 组件渲染到主 App 组件中/

Question

我正在将我的客户端代码从 jQuery 移动到 React。 我的（修剪过的）主应用程序看起来像这样

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

在几个组件中，我有时需要调用构建 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);
}

问题是，如果在我的Modal中我有一个 react-router Link ，那么我会收到以下错误：

Uncaught Error: Invariant failed 你不应该在路由器外使用 Link

现在，我可以理解错误了，因为我在MyApp的上下文之外进行渲染。 我的问题是：如何更改我的 function 使其呈现到与MyApp相同的上下文中？

我无法在网上找到任何此类问题或概念（除了重写我的整个应用程序以对我需要打开的每个 window 使用 state 之外，目前这不实用）。

谢谢！

Answer 1

使用路由器链接的组件必须是在路由器内渲染的组件的子组件。

在您的情况下，您的路由器内只有<Dashboard />和<SideNav />呈现。 确保<Modal / >由<Dashboard /> 、 <SideNav />或它们的后代呈现。

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

参见： https://reactjs.org/docs/integrating-with-other-libraries.html