Question

所以我有两个应用程序，一个是使用React 15.3构建的遗留应用程序，另一个是使用React 16.7构建的应用程序。较新的应用程序被构建为适应原本旧应用程序不可用的功能请求。这两个应用程序都可以独立顺利运行，但是合并时只是纯粹的混乱。这两个应用程序的目标是即使是最低级别的通信（例如，传递参数，道具，变量等）。

我尝试过的事情

我构建了较新的应用程序，然后在HTML文件中添加了另一个div，以便两个应用程序都可以在同一页面上运行，但它们之间没有交互。（有效，但未达到目标）
我为较新的应用程序构建了一个缩小的js文件，然后将其作为组件导入到较旧的应用程序中。（不起作用）
我从较新的应用程序中挽救了组件，然后将它们复制到较旧的应用程序中。（不起作用）

我徒劳的尝试使我得出以下结论：两个应用程序中的任何一个都需要升级/降级。由于较新的应用程序和其他内容（例如es6）的依赖性，我倾向于对旧版应用程序进行升级。如果有人能指出我正确的方向，那就太好了。

Answer 1

这可以通过分别渲染React 15和React 16应用程序来实现。

应使用React.createElement创建反应15组件，并使用属于React 15的ReactDOM.render进行渲染，这同样适用于React 16应用程序。如果将React 15应用程序单独捆绑并导入到React 16应用程序中，则可以实现这一点，这可以确保它们的react和react-dom依赖项保持隔离。

这里是example。为了避免react@15和react@16软件包之间的冲突，React 15被用作全局变量：

  <head>
    <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>
    <script>
      window.React15 = window.React;
      window.ReactDOM15 = window.ReactDOM;
      delete window.React;
      delete window.ReactDOM;
    </script>
  </head>

React 16被用作NPM依赖项。

第15号反应申请：

export const React = window.React15;
export const ReactDOM = window.ReactDOM15;

export class React15Component extends React.Component {
  static getDerivedStateFromProps() {
    throw "Should not support React 16 hook";
  }

  render() {
    return <div>Hello from {this.props.name}</div>;
  }
}

它由React 16应用程序托管：

import { React15Component, React as React15, ReactDOM as ReactDOM15 } from "./react15";

import React from "react";
import ReactDOM from "react-dom";

class React16Component extends React.Component {
  containerRef = React.createRef();

  static getDerivedStateFromProps({ name }) {
    name += "!";
    return { name };
  }

  componentDidMount() {
    ReactDOM15.render(
      React15.createElement(React15Component, { name: "React 15" }),
      this.containerRef.current
    );
  }

  render() {
    return (
      <>
        <div>Hello from {this.state.name}</div>
        <div ref={this.containerRef} />
      </>
    );
  }
}

ReactDOM.render(<React16Component name="React 16" />, document.getElementById("root"));

将两个React应用与不同版本的React合并

1 个答案: