如何將 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