如何将复合 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