reactjs - 无法通过模态访问上下文和提供者

Question

我不控制我公司的模态组件。我正在使用 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'));

我的应用.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 存储都没有出现。相反，我得到了这个。

我目前对如何使它正常工作一头雾水。我感谢提供的任何帮助。

Answer 1

如果以某种方式转发上下文值，我会假设该模态，但可能只是遗留上下文。所以它可能适用于旧版本或 react-redux，但不适用于当前版本。

您必须要么在模态中使用 Portal 而不是创建一个全新的 ReactDOM 实例(这可能正在发生)，要么将当前值转发到模态中的一个新实例，就像这样

function YourComponent(){
  const store = useStore()

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