Soy nuevo en React y trato de entender el uso de accesorios con representación condicional. Tengo un componente llamado Intro.js dentro de mi app.js.
Mi objetivo es hacer clic en un botón en un formulario en Intro.js y eliminar Intro de app.js. Pude lograr esto con un botón en app.js pero no dentro de Intro.js. ¿Cómo puedo hacer que esto funcione dentro del componente secundario Intro.js?
const [introSection, setIntroSection] = useState(false) { introSection ? <Intro /> : true } <Button onClick={() => setIntro(false)}> Remove Intro Section</Button>En primer lugar, su actualización de estado tampoco está alineada con la función real. Debería ser setIntroSection en lugar de setIntro
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>Ya casi llegas con tu lógica. Solo necesita modificar su lógica como a continuación
{ introSection ? <Intro /> : null } <Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>Pero esta no es una buena forma cuando tenemos una estructura muy compleja en el camino verdadero, así que personalmente prefiero esta forma.
{introSection && <Intro />} //when it's false, nothing is rendered <Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button> Si quieres hacerlo dentro de Intro , puedes pasar un prop
<Intro isHidden={true} /> Y en Intro , puedes tener esta lógica
const Intro = ({ isHidden }) => { if(isHidden) { return null } //true path to render your own component return <div></div> }Debe pasar su función setIntro/setIntroSection (depende de cómo la haya usado) al componente Intro como accesorio, para que pueda acceder y usar esa función de estado. Espero que esto ayude.
Use setIntroSection, no setIntro.
Un montón de código será útil para responder.