上下文和提供程序无法通过Modal访问

问题描述

我不控制公司中的模态组件。我正在使用redux-toolkit，所以我想知道这是否是问题。我尝试了几次不同的迭代以使其正常工作，并尝试模仿与之兼容的另一个应用程序（标准redux应用程序）。

下面的代码是我试图模仿其他可以正常运行的应用程序。

我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'proxima-nova/scss/proxima-nova.scss'
import './css/styles.scss';
import { configureStore,getDefaultMiddleware } from '@reduxjs/toolkit';
import { RcReducer } from './Store/RC/Events';
import { RcDataReducer } from './Store/RC/RcData';

const middleware = [...getDefaultMiddleware()];

export const ReduxStore = configureStore({
    reducer: {
        RcEvents: RcReducer,RcData: RcDataReducer,},middleware,});

ReactDOM.render(<App store={ReduxStore} />,document.getElementById('app'));

我的app.tsx

import React,{ lazy,Suspense } from 'react';
import { browserRouter as Router,Switch,Route } from 'react-router-dom';
import Wrapper from './Components/Wrapper/Wrapper';
import './App.scss';
import Loader from './Components/Common/Loader/Loader';
import { Provider } from 'react-redux';
import StoreProvider from './Store/Store';

const Home = lazy(() => import('./Components/Pages/Home/Home'));
const RcDashboard = lazy(() => import('./Components/Pages/RC/RC'));
const EccDashboard = lazy(() => import('./Components/Pages/ECC/Dashboard/Dashboard'));

const App: React.FunctionComponent<{ store: any }> = ({ store }: { store: any }) => {
    return (
        <Provider store={store}>
            <StoreProvider>
                <Router>
                    <div id='root'>
                        <Wrapper>
                            <Suspense fallback={<Loader overlay={true} fullscreen={false} size='xl' />}>
                                <Switch>
                                    <Route path='/' exact component={Home} />
                                    <Route path='/rc' component={RcDashboard} />
                                    <Route path='/ecc' exact component={EccDashboard} />
                                </Switch>
                            </Suspense>
                        </Wrapper>
                    </div>
                </Router>
            </StoreProvider>
        </Provider>
    );
};

export default App;

我正在呼叫一个供公司内部使用的组件。我个人无法控制此组件的行为。这是一个模态。模态不仅将自身附加到被调用的组件上，还自动将自身附加到body标签上。

由于某种原因，我的上下文和redux存储都未显示。我得到了这个。

我现在对如何使它工作感到困惑。感谢提供的任何帮助。

解决方法

我会假设该模式以某种方式转发上下文值，但可能仅转发旧式上下文。因此它可能适用于旧版本或react-redux，但不适用于当前版本。

您将不得不在模式中使用Portal而不是创建一个全新的ReactDOM实例（这可能正在发生），或者像这样将当前值转发到模式中的新值

function YourComponent(){
  const store = useStore()

  return <Modal><Provider store={store}>whatEverGoesIntoYourModal</Provider></Modal>
}