Vi preguntas similares aquí, pero no abordan este problema específico.
Tengo un componente de función de reacción como este,
function Overlay() { return <div className="off"></div>; }Quiero cambiar su propiedad className más adelante en función de un evento de clic que se produce en un elemento Btn. Tenga en cuenta que el elemento Btn no es padre ni hijo del elemento Superposición.
function Btn() { return <button onClick={changeOverlayProperty} ></button>; }Entonces, ¿qué debería hacer "changeOverlayProperty" para lograr el resultado? ¿Hay alguna "forma de reacción" para hacerlo que no sea confiar en los métodos de elementos habituales como "getElementsByClassName"? Dar códigos reales será útil ya que soy totalmente nuevo en ReactJS.
El ContextAPI se puede utilizar para enviar el valor className a otro Componente:
import { createContext, useState, useContext } from 'react'; const Context = createContext("off"); // <= Create a Context so that state can be shared among different Components (including siblings) function Overlay() { const { className } = useContext(Context); // Grab the className value from the Context. The value className will be set via the Btn Component's click handler return <div className={className}>Overlay</div>; } function Btn() { const { setClassName } = useContext(Context); // Grab the setClassName method from the Context return <button onClick={()=> setClassName("on")} >Change Class</button>; } export default function App() { const [ className, setClassName ] = useState("off"); return ( <> {/* Wrap the Components that need to share some value in a Context.Provider and share some values via the value prop */} <Context.Provider value={{ className, setClassName }}> <h1>React</h1> <Overlay /> <Btn /> </Context.Provider> </> ); } <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div> <style>.off { background: red } .on { background: green }</style> <script type="text/babel"> const Context = React.createContext("off"); function Overlay() { const { className } = React.useContext(Context); return <div className={className}>Overlay</div>; } function Btn() { const { setClassName } = React.useContext(Context); return <button onClick={()=> setClassName("on")} >Change Class</button>; } function App() { const [ className, setClassName ] = React.useState("off"); return ( <Context.Provider value={{ className, setClassName }}> <h1>React</h1> <Overlay /> <Btn /> </Context.Provider> ); } ReactDOM.render( <App />, document.getElementById("root") ); </script>