将两个 React 应用合并为一个

Question

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

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

第二个是带有路由器的 React DnD，它的 index.ts 文件是：

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

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

Answer 1

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

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
);

将两个 React 应用合并为一个

Merge two React applications into one

reactjs

react-dnd