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

Question

I have the old website which was built by Vanilia Javascript.我有由 Vanilia Javascript 建立的旧网站。 And now I am converting it to React.现在我将它转换为 React。 So I am going to render compound React(Typescript) component in HTML page.所以我要在 HTML 页面中渲染复合 React(Typescript) 组件。 But it does not work.但它不起作用。 Here is my code.这是我的代码。

app.html应用程序.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>

My component - Test.tsx我的组件 - 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"))

I found many examples for this, but it was a simple component.我为此找到了很多示例，但它是一个简单的组件。 It worked for me.它对我有用。 But when I try to render my component in HTML, it does not work.但是当我尝试在 HTML 中渲染我的组件时，它不起作用。 My component includes external component, Material UI and etc. Is it possible to render my component in HTML page?我的组件包括外部组件、Material UI 等。是否可以在 HTML 页面中呈现我的组件？ If yes, please anyone help me.如果是，请任何人帮助我。

Answer 1

It is probably not easily possible.这可能不容易。

(Note: actually I'm thinking of a webpack setup right now. I never used parcel , as recommended in the comments to your question, and I don't know the possibilities there) （注意：实际上我现在正在考虑 webpack 设置。我从未使用过parcel ，正如您对问题的评论中所建议的那样，我不知道那里的可能性）

HTML and the React app source code are very different technologies, basically: HTML 和 React 应用程序源代码是非常不同的技术，基本上：

React is Javascript / JSX / Typescript /... code that is compiled and generates HTML pages, and React 是 Javascript / JSX / Typescript /... 编译并生成 HTML 页面的代码，以及
a HTML website is HTML pages, (probably) including some javascript code一个 HTML 网站是 HTML 页面，（可能）包括一些 javascript 代码

React code just doesn't know anything about the static HTML files, and the HTML files can not compile the React code. React 代码对 static HTML 文件一无所知，而 HTML 文件无法编译 React 代码。

The React app includes eg these technologies: React 应用程序包括例如这些技术：

modules (see also How to isolate components in React app.js bundle )模块（另请参阅如何在 React app.js 包中隔离组件）
Typescript, needs to be "compiled out" Typescript，需要“编译出来”
JSX, needs to be compiled to javascript JSX，需要编译成javascript

There are solutions (more or less) for all these individual technologies, but in combination it becomes quite complicated, and it's probably less work to refactor the whole HTML website to React code (or more efficient to do it all at once, instead of bit by bit).所有这些单独的技术都有解决方案（或多或少），但结合起来会变得相当复杂，而且将整个 HTML 网站重构为 React 代码可能会更少工作（或者更有效地一次完成所有工作，而不是位一点一点）。

There are some different approaches:有一些不同的方法：

Build a React app and copy the old HTML code into it构建一个 React 应用程序并将旧的 HTML 代码复制到其中
HTML pages, ReactDOM.render() in one or more places HTML 页面， ReactDOM.render()在一处或多处
React code using dangerouslySetInnerHTML使用dangerouslySetInnerHTML反应代码
Setup some complex tooling and workflow that is combining the old HTML code and the HTML code that is generated by React, after the React compiling在 React 编译后，设置一些复杂的工具和工作流程，将旧的 HTML 代码和由 React 生成的 HTML 代码结合起来
... ...

See also:也可以看看：

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