Tengo el sitio web anterior que fue construido por Vanilia Javascript. Y ahora lo estoy convirtiendo a React. Así que voy a representar el componente compuesto React (Typescript) en la página HTML. Pero no funciona. Aquí está mi código.
aplicación.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>Mi componente - 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"))Encontré muchos ejemplos para esto, pero era un componente simple. Funcionó para mí. Pero cuando trato de representar mi componente en HTML, no funciona. Mi componente incluye un componente externo, una interfaz de usuario de material, etc. ¿Es posible representar mi componente en una página HTML? Si es así, por favor que alguien me ayude.
Probablemente no sea fácilmente posible.
(Nota: en realidad estoy pensando en una configuración de paquete web en este momento. Nunca usé el paquete , como se recomienda en los comentarios a su pregunta, y no conozco las posibilidades allí)
HTML y el código fuente de la aplicación React son tecnologías muy diferentes, básicamente:
El código React simplemente no sabe nada sobre los archivos HTML estáticos, y los archivos HTML no pueden compilar el código React.
La aplicación React incluye, por ejemplo, estas tecnologías:
Hay soluciones (más o menos) para todas estas tecnologías individuales, pero en combinación se vuelve bastante complicado, y probablemente sea menos trabajo refactorizar todo el sitio web HTML a código React (o más eficiente hacerlo todo a la vez, en lugar de hacerlo un poco). a poco).
Hay algunos enfoques diferentes:
ReactDOM.render() en uno o más lugaresVer también: