如何将复合 React(Typescript) 组件集成到 html 页面中答案

【问题标题】：How to integrate compound React(Typescript) component into html page如何将复合 React(Typescript) 组件集成到 html 页面中
【发布时间】：2022-01-14 01:39:22
【问题描述】：

我有一个由 Vanilia Javascript 构建的旧网站。现在我将它转换为 React。所以我要在 HTML 页面中渲染复合 React(Typescript) 组件。但它不起作用。这是我的代码。

app.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 页面中呈现我的组件？如果是，请任何人帮助我。

【问题讨论】：

您当前正在浏览器中构建您的组件，这被认为是一种不好的做法，并且对于没有大量手动工作的任何实际项目都不会。我建议研究不同的捆绑程序。我会推荐parcel，因为它很容易设置并且几乎不需要配置。您需要先阅读他们的入门指南。

标签： javascript html reactjs typescript

【解决方案1】：

这可能并不容易。

（注意：实际上我现在正在考虑设置 webpack。我从未使用过 parcel，正如 cmets 对您的问题所建议的那样，我不知道那里的可能性）

HTML 和 React 应用程序源代码是非常不同的技术，基本上：

React 是 Javascript / JSX / Typescript / ... 编译并生成 HTML 页面的代码，并且
HTML 网站是 HTML 页面，（可能）包括一些 javascript 代码

React 代码只是对静态 HTML 文件一无所知，HTML 文件无法编译 React 代码。

React 应用程序包括例如这些技术：

模块（另见How to isolate components in React app.js bundle）
Typescript，需要“编译”
JSX，需要编译成javascript

所有这些单独的技术都有解决方案（或多或少），但结合起来变得相当复杂，将整个 HTML 网站重构为 React 代码可能会减少工作量（或者更有效地一次性完成，而不是一点一点）。

有一些不同的方法：

构建一个 React 应用并将旧的 HTML 代码复制到其中
HTML 页面，ReactDOM.render() 位于一处或多处
反应代码使用dangerouslySetInnerHTML
在 React 编译后设置一些复杂的工具和工作流，将旧的 HTML 代码和由 React 生成的 HTML 代码结合起来
...

另见：

【讨论】：