Soy bastante nuevo en React y trato de editar el código de un antiguo compañero de trabajo (de ahí el estilo React no tradicional).
Necesito devolver una serie de botones (aquí "Hola" y "Adiós") cuando se hace clic en un solo botón ("Desplegable"). Para hacer esto más dinámico en el futuro, me gustaría devolver esos botones desde una función (dropdownDetails) en lugar de variables [show,setShow], etc.
Cuando ejecuto este código, la consola muestra que se activa dropdownDetails, pero "Hola" y "Adiós" no aparecen en la interfaz de usuario. ¿Qué estoy haciendo mal?
¡Gracias por adelantado!
///// In base.js: const e = React.createElement; ///// in page_body.js: function pageBody(props) { const dropdownDetailsWrap = (props) => (e) => { console.log("Wrap triggered") dropdownDetails() } function dropdownDetails() { console.log("dropdownDetails useEffect triggered") return( e("button",{type:"button"},"Hello"), e("button",{type:"button"},"Goodbye") ); }; const pageBody = () => (e) => { return( e("button", {type:"button",onClick:dropdownDetailsWrap(),className:'btn'},"Dropdown") )} } ReactDOM.render(e(pageBody), document.querySelector('#page_body'));Nota: sé que hay formas más elegantes de hacer un menú desplegable, particularmente usando paquetes. Solo trato de entender los conceptos básicos con React puro por ahora.
Probablemente pueda hacer esto siempre que use el gancho useState de reaccionar.
Sin usar el estado, dudo que podamos hacer esto.
Estoy pegando el código a continuación, revíselo en codesandbox para explorar más.
Aquí está el enlace Enlace
Código:
import React, { useState } from "react"; const e = React.createElement; export default function App() { return ( <div className="App"> <PageBody /> </div> ); } function PageBody(props) { var buttonsToShow; const [showButtons, setshowButtons] = useState(false); const [buttons, setButtons] = useState([]); const dropdownDetailsWrap = (props) => { console.log("Wrap triggered"); buttonsToShow = dropdownDetails(); setButtons(buttonsToShow); setshowButtons(true); }; function dropdownDetails() { console.log("dropdownDetails useEffect triggered"); return [ e("button", { type: "button", key: 1 }, "Hello"), e("button", { type: "button", key: 2 }, "Goodbye") ]; } var dropbutton = () => { return e( "button", { type: "button", onClick: dropdownDetailsWrap, className: "btn" }, "Dropdown" ); }; return ( <div> {dropbutton()} <br /> {showButtons && buttons} </div> ); }Ahora, sé que esta no es la mejor versión, pero aún así puedes limpiar este código y usar la lógica. Además, al usar el estado, su código no se vuelve estático, además, puede personalizar más cosas,