Puede realizar perforaciones de utilería , es decir, agregar un estado al <GrandParentComponent/> y pasarlo como utilería a los componentes secundarios.

abuelo

 export default GrandParentComponent(){ const [rotateIcon, setRotateIcon] = useState(false); // pass the state and setState down to the children return <ParentComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> }

padre

 export default ParentComponent({rotateIcon, setRotateIcon}){ // pass props to child component again return <ChildComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> }

niño

 export default ChildComponent({rotateIcon, setRotateIcon}){ const expandAttachment = useCallback(() => { setRotateIcon(!rotateIcon); }, [rotateIcon]); <img src="assets/arrow" transform={rotateIcon ? 'rotate(90deg)' : 'rotate(0)'} > }

No hay nada intrínsecamente malo en la perforación de apoyo, pero se vuelve más difícil administrar el estado de la aplicación a medida que aumenta la complejidad.

Para evitar esto, usamos React Context o Redux. React Context está integrado en React, por lo que es muy ligero y potente al mismo tiempo. Es perfecto para una situación como la tuya.

Para que la respuesta sea breve, lea cómo implementar React Context y useContext hook aquí .

almacene el estado en GrandParentComponent y pase entre los componentes como un accesorio para llegar a ChildComponent . Los accesorios están destinados a pasar de un componente principal a uno o más componentes secundarios .

Como yo lo veo tienes 3 opciones:

1. Almacene los accesorios de estado en el padre de todos los componentes, lo cual creo que es demasiado complejo para este propósito.
2. Use Redux para manejar la administración de estado de la aplicación
3. Use la API de contexto para manejar la administración de estado de la aplicación como un estado global. Puede consultar este blog para esto: https://www.loginradius.com/blog/engineering/react-context-api/#:~:text=What%20is%20Context%20API%3F,to%20parent%2C %20y%20so%20en .

Sin embargo, uso y recomiendo usar redux para operaciones complejas como esta. Cuando comprende la idea detrás de redux, se vuelve muy fácil de usar.