如何使用 React 組件作為舊版 HTML/JS 應用程序的一部分？

Question

我有一個使用 HTML/JS 運行的舊 web 應用程序。 我創建了一個新的 React 應用程序，我的目標是開始使用 React 開發新功能/頁面，並在當前應用程序中實現它們。

主要目標是在 react 之外使用 React 組件，例如：

<html>
<head>
<title> My old web applciation</title>
// Imports for my react app / components
</head>
<body>

<!-- Old staff -->

<Footer someProp="1"/>

</body>
</html>

到目前為止我所擁有的：

對於整頁功能，我使用了 Iframe（並在 React 中為它創建了一個路由）
使用元素 ID，例如::

並做出反應：

const GiveItem = ({ ...props }) => {

  console.log("init give item component");

  return (
    <section>
     Give Item
    </section>
  );
};

try {
  const domContainer = document.querySelector('#giveItem');
  render(e(GiveItem), domContainer);
} catch (e) {
  console.error('Failed to render give item', e);
}

export default GiveItem;

是否有任何合法的方法可以將反應組件“導出”到 HTML（外部反應）並將它們用作本機組件，例如：

<GiveItem someProp="1"/>

使用 Vue 我設法做到了，只需將最高級別的元素包裝為：

    <div id="vapp">

 .... My old code

<VueComponent />

回到這個問題 - 我如何在遺留應用程序的不同部分顯示/使用 React 組件作為原生 HTML 組件？

謝謝！

Answer 1

我將我的答案分為三個部分：

一般簡單地包含反應
讓你的例子工作
模塊

（我將在下面使用紗線。您也可以使用npm ，我假設您熟悉這些。）

1.一般react的簡單包含

請參閱將 React 添加到網站。

索引.html ：

<html><head>
    <title>My old web applciation</title>
</head><body>

<h1>old stuff</h1>
<p>Some old HTML content.</p>

<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>

<!-- import the react libraray -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- import your react component -->
<script src="GiveItem.js"></script>

</body></html>

GiveItem.js ：
（從 JSX 修改為 JS。對於 JSX，請參閱第 2 節。）

const GiveItem = (props) => {
    console.log("init give item component");
    return React.createElement(
        "section",
        null,
        "Give item content"
    );
};

const domContainer = document.querySelector('#injected-react-content');

ReactDOM.render( React.createElement(GiveItem), domContainer );

2.讓你的例子工作

您的組件使用 JSX。 您需要使用babel將其轉換為 JS。

給項目。 jsx ：
（沒必要叫它.jsx，但有道理）

const GiveItem = (props) => {
    return (
        <section>
            Give Item
        </section>
    );
};

const domContainer = document.querySelector('#injected-react-content');
ReactDOM.render( React.createElement(GiveItem), domContainer );

安裝通天塔：

yarn add @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react --dev

將您的 JSX 文件./src/GiveItem.jsx轉換為./dist/GiveItem.js中的 JS 文件：

yarn babel ./src/GiveItem.jsx --presets=@babel/preset-react --out-dir dist

（如果dist文件夾不存在，將創建它）

如果您現在將 index.html 復制到./dist中，您應該具有與第 1 節中相同的代碼，並且在瀏覽器中打開./dist/index.html應該可以工作。

3. 模塊

當然，您可能希望導入其他反應組件和子組件。
（而且您可能不想使用<script>標簽單獨導入所有內容。）

如果已經設置了環境

也許您的舊應用程序已經在紗線（或 npm）環境中運行，那么您可能會很好

安裝yarn add react和yarn add react-dom
刪除兩個<script src="https://unpkg.com/react...行（因為 react 可能已經導入到您的組件中），
然后導入一些根組件（而不是之前的GiveItem.js ），在其中執行ReactDOM.render(...)並導入更多模塊：

例如：

索引.html ：

<!-- import your react component -->
<script type="module" src="EntryIntoReactWorld.js"></script>

EntryIntoReactWorld.js ：

import SomeComponent from './SomeComponent';
import SomeOtherComponent from './SomeOtherComponent';

const ReactRoot = props => {
  return React.createElement(
      "div",
      null,
      React.createElement(SomeComponent, null),
      React.createElement(SomeOtherComponent, null)
  );
};

ReactDOM.render(
    React.createElement(ReactRoot),
    document.querySelector('#injected-react-content')
);

如果尚未設置環境

如果您的舊應用程序尚未在紗線（或 npm）環境中運行，則必須設置一個。

不幸的是，這不是微不足道的。
（我試圖在這里寫一個簡短的工作示例，但我失敗了。）

為此，您必須進入Javascript 模塊的世界。 但是現代瀏覽器不允許本地文件系統中的很多東西。 （例如參見CORS 問題， MIME 問題，...）

您必須安裝服務器進行開發。 你可能從http-server開始，但在那里你可能仍然會遇到問題，所以我建議已經開始編寫server.js文件並使用note http 。 （也許expressjs也可以。不是必須的，但大家都用，而且更容易找到幫助和教程。）

您可能還需要webpack 。

當然，您還必須安裝yarn add react和yarn add react-dom 。

如何使用 React 組件作為舊版 HTML/JS 應用程序的一部分？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-28 21:56:09

1.一般react的簡單包含

2.讓你的例子工作

3. 模塊

如果已經設置了環境

如果尚未設置環境

如何使用 React 組件作為舊版 HTML/JS 應用程序的一部分？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-28 21:56:09

1.一般react的簡單包含

2.讓你的例子工作

3. 模塊

如果已經設置了環境

如果尚未設置環境

解決方案1
1 已采納 2021-01-28 21:56:09