微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将两个 React 应用程序合并为一个

如何解决将两个 React 应用程序合并为一个

我正在尝试结合两个现有的 React 应用程序。第一个是常规的,没有路由器,所以 index.ts 文件 渲染:

ReactDOM.render(
  <App />,document.getElementById('root') as HTMLElement
);

第二个是React DnD with router,它的index.ts文件是:

ReactDOM.render(
  <DndProvider backend={HTML5Backend}>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </DndProvider>,document.getElementById('root')
)

在我的 App.tsx 文件中,我决定呈现什么内容用户请求第一个还是第二个应用程序),所以我不确定如何将提供程序与应用程序隔离 如果我不需要它。

解决方法

您可以将最终渲染到 DOM inn App.tsx 并创建两个组件,有和没有 Provider 并选择您需要的一个并渲染它

index.ts

const AppWithProvider = () => (
   <DndProvider backend={HTML5Backend}>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </DndProvider>
)
export default AppWithProvider;

App.tsx

import AppWithProvider from '/your/provider/path';
import App from '/your/app/path';
const Comp = yourConditionForProvider? AppWithProvider: App;
ReactDOM.render(
  <Comp />,document.getElementById('root') as HTMLElement
);

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