Mi objetivo: hacer clic en un botón en un componente secundario y eliminar ese componente.
Nuevo en Reaccionar. En mi app.js tengo un componente y un accesorio dentro de ese componente:
<IntroSteps isHidden={false} /> En el componente <IntroSteps> tengo lógica para escuchar la Prop isHidden
export default function IntroSteps({isHidden}) { if(isHidden) { return null } return ( <div> content </div> ) }Mi objetivo es poder actualizar isHidden dentro del componente IntroSteps. He intentado lo siguiente sin suerte. ¿Cuál es la forma correcta de hacer esto?
const removeIntroSteps = () => { isHidden = true };Los accesorios son inmutables, por lo que me temo que es posible que no pueda cambiarlos en el componente secundario. Prefiero hacerlo de esta manera: en app.js
const [isHidden, setIsHidden] = useState[false]; const updateHidden =() =>{ setIsHidden(!isHidden) //true or false } <IntroSteps isHidden={isHidden} updateHidden={updateHidden} /> Luego, en el componente secundario, simplemente llame a updateHidden donde sea necesario.
En un comentario has aclarado:
desea poder hacer clic en un botón dentro del componente secundario y eliminarlo del dom
La mejor manera de hacerlo es hacer que el componente secundario llame a una función que el padre le pasa, y hacer que el padre represente al secundario (no oculto) o no lo represente (oculto) (o alternativamente, represente con el indicador isHidden y el componente secundario puede devolver un null cuando isHidden es verdadero, pero eso parece indirecto).
Ejemplo rápido:
const { useState } = React; const Child = ({hide}) => { return <div> I'm the child <input type="button" onClick={hide} value="Hide Me" /> </div>; }; const Example = () => { const [childHidden, setChildHidden] = useState(false); const hideChild = () => setChildHidden(true); return <div> {childHidden ? null : <Child hide={hideChild} />} </div>; }; ReactDOM.render(<Example />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Si bien puede agregar un estado al componente secundario que le permite mantener un indicador separado ( hiddenMyself , por ejemplo, y luego devolver un null si isHidden u hiddenMyself es verdadero), no puede cambiar directamente el estado de la propiedad isHidden . Eso es algo que controla el componente principal, no el secundario.
Los accesorios son de solo lectura , por lo que no puedes.
Debe pasar una función a su componente que sea responsable de actualizar el estado de isHidden.
En los IntroSteps, debe agregar esto, por ejemplo:
const toggleIsHidden => setIsHidden(!isHidden); <IntroSteps isHidden={false} toggleIsHidden={toggleIsHidden} />Luego, en tu componente:
export default function IntroSteps({isHidden, toggleIsHidden}) { // use toggleIsHidden function as you need if(isHidden) { return null } return ( <div> content </div> ) }