en primer lugar, no puedo usar el comando "create-react-app" en el proyecto actual.
así que aquí estoy tratando de agregar mi código de reacción en un archivo HTML simple.
Aquí están mis códigos para archivos HTML y js.
¿Alguien puede decirme por qué mis ganchos y setState no funcionan correctamente?
Por favor guíame para resolverlo.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <p>React is loaded as a script tag.</p> <!-- We will put our React component inside this div. --> <div id="like_button_container"></div> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- Load our React component. --> <script src="like_button.js"></script> </body> </html>mis códigos like_button.js
'use strict'; const e = React.createElement; const LikeButton = () => { const [liked, setLiked] = useState(false); useEffect(() => { if (liked) { return <div>You liked this</div>; } }, [liked]); return e('button', { onClick: () => setLiked(true) }, 'Like'); }; const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer);Está tratando de regresar de un useEffect, el retorno de un useEffect es para la limpieza de un efecto.
De hecho, ni siquiera necesita usar useEffect, solo necesita cambiar su renderizado según el estado que le guste.
Además, el código de ejemplo que mostró tiene sintaxis JSX, por lo que no estoy seguro de por qué está usando createElement, pero he creado el siguiente ejemplo sin él, por si acaso ...
p.ej.
const e = React.createElement; const {useState, useEffect} = React; const LikeButton = () => { const [liked, setLiked] = useState(false); return e('button', { onClick: () => setLiked(true) }, liked ? 'You Like this..' : 'Like'); }; const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); <p>React is loaded as a script tag.</p> <!-- We will put our React component inside this div. --> <div id="like_button_container"></div> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>