如何將復合 React(Typescript) 組件集成到 html 頁面

Question

我有由 Vanilia Javascript 建立的舊網站。 現在我將它轉換為 React。 所以我要在 HTML 頁面中渲染復合 React(Typescript) 組件。 但它不起作用。 這是我的代碼。

應用程序.html

<body>
  <div id="test-id">
  </div>
  <script src="https://unpkg.com/react@15/dist/react.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js" crossorigin></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
  <script type="text/tsx" src="../test/component/Test.tsx"></script>
</body>

我的組件 - Test.tsx

import { makeStyles, ThemeProvider } from '@material-ui/core';
import { Web3Provider } from '@ethersproject/providers';
import { useWeb3React } from '@web3-react/core';
import { useEffect, useState } from 'react';
import Header from '../Layout/Header';
import { api } from '../../services/api/api';
import TestMain from './TestMain';
import Footer from '../Footer/Footer';

const useStyles = makeStyles((theme) => ({
 ... some styles
}));

type Props = {};

const Test: React.FC<any> = () => {
  const classes = useStyles();

  let data: [] = [...example data]

  return (
    <div className={classes.root}>
      <Header login={true} color="primary"/>
      <main className={classes.main}>
        <TestMain data={data} />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.render(<Test />, document.getElementById("test-id"))

我為此找到了很多示例，但它是一個簡單的組件。 它對我有用。 但是當我嘗試在 HTML 中渲染我的組件時，它不起作用。 我的組件包括外部組件、Material UI 等。是否可以在 HTML 頁面中呈現我的組件？ 如果是，請任何人幫助我。

Answer 1

這可能不容易。

（注意：實際上我現在正在考慮 webpack 設置。我從未使用過parcel ，正如您對問題的評論中所建議的那樣，我不知道那里的可能性）

HTML 和 React 應用程序源代碼是非常不同的技術，基本上：

React 是 Javascript / JSX / Typescript /... 編譯並生成 HTML 頁面的代碼，以及
一個 HTML 網站是 HTML 頁面，（可能）包括一些 javascript 代碼

React 代碼對 static HTML 文件一無所知，而 HTML 文件無法編譯 React 代碼。

React 應用程序包括例如這些技術：

模塊（另請參閱如何在 React app.js 包中隔離組件）
Typescript，需要“編譯出來”
JSX，需要編譯成javascript

所有這些單獨的技術都有解決方案（或多或少），但結合起來會變得相當復雜，而且將整個 HTML 網站重構為 React 代碼可能會更少工作（或者更有效地一次完成所有工作，而不是位一點一點）。

有一些不同的方法：

構建一個 React 應用程序並將舊的 HTML 代碼復制到其中
HTML 頁面， ReactDOM.render()在一處或多處
使用dangerouslySetInnerHTML反應代碼
在 React 編譯后，設置一些復雜的工具和工作流程，將舊的 HTML 代碼和由 React 生成的 HTML 代碼結合起來
...

也可以看看：

如何將復合 React(Typescript) 組件集成到 html 頁面

問題描述

1 個解決方案

解決方案1
0 2022-01-15 12:26:23

如何將復合 React(Typescript) 組件集成到 html 頁面

問題描述

1 個解決方案

解決方案1 0 2022-01-15 12:26:23

解決方案1
0 2022-01-15 12:26:23