如何解决上下文和提供程序无法通过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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。