Quiero usar el componente de reacción en el archivo html. Es para micro frontend. Así que sigo este documento oficial de reacción para agregar React a un sitio web .
El código de ejemplo es el siguiente:
índice.html
<html> <body> <p> This is the first like. <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second like. <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third like. <div class="like_button_container" data-commentid="text"></div> </p> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="like_button.js"></script> </body> </html>like_button.js
"use strict"; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { return e( "button", { onClick: () => this.setState((prevState) => ({ liked: !prevState.liked, })), }, this.state.liked ? "Liked " + this.props.commentID : "Unliked" ); } } document.querySelectorAll(".like_button_container").forEach((domContainer) => { const commentID = domContainer.dataset.commentid; ReactDOM.render(e(LikeButton, { commentID: commentID }), domContainer); });El código anterior funciona bien, pero quiero convertir like_button.js , que es un componente de clase en un componente funcional.
Gracias por adelantado.
Debe usar babel standalone script para transcompilar el código, y debe incluir el script para react y react-dom , utilícelos funcionará.
<html> <head> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/@babel/standalone@7.15.7/babel.min.js"></script> </head> <body> <div id="react-container"></div> <script type="text/babel"> const App = () => <div>Hello!</div> ReactDOM.render( <App />, document.getElementById('react-container')) </script> </body> </html>Babel Standalone convierte ECMAScript 2015+ en la versión compatible de JavaScript para su navegador, el uso de CDN se describe en la documentación oficial, consulte la sección de babel standalone: Babel Standalone