Na minha visão você deve utilizar Context, Redux ou algo que planeje seu código a executar funções de mudança de estado global, por exemplo, mudança da cor do site inteira. Um exemplo claro está nessa resposta utilizando context
. Como funciona, ao criar esse context
ele vai estabelecer relação com todos os componentes que estão internamente declarados e com isso tendo a possibilidade em compartilhar de forma clara variáveis e funcionalidades globais.
Um exemplo claro de mudança de cor do fundo do seu site:
const CssContext = React.createContext();
const CssProvider = ({children}) => {
const [color, setColor] = React.useState("#d3d3d3");
const handleChangeColor = () => {
if (color === "#d3d3d3") {
setColor("#FFFF00");
} else {
setColor("#d3d3d3");
}
}
return (
<CssContext.Provider value={{color, handleChangeColor}}>
{children}
</CssContext.Provider>
)
}
const Page = () => {
const context = React.useContext(CssContext);
return <div style={{backgroundColor: context.color}}>{context.color}</div>
}
const Button = () => {
const context = React.useContext(CssContext);
return <div>
<button onClick={context.handleChangeColor}>Alterar Cor</button>
</div>
}
const Button1 = () => {
const context = React.useContext(CssContext);
return <div>
<button onClick={context.handleChangeColor}>Alterar Cor</button>
</div>
}
const Root = () => {
return (
<CssProvider>
<Page />
<Button />
<Button1 />
</CssProvider>
)
}
ReactDOM.render( <Root/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
Observe que os componentes estão executando a mesma função Button
e Button1
e esse exemplo denota que todos os componentes que estão dentro desse Contexto tem a possibilidade de compartilhar a mesma funções, esse tipo de código geralmente em Login de usuário para armazenar token ou dados pertinentes ao todo o seu código pode ser criado.
Existe outro exemplo de compartilhamento via props
, mas, com ressalvas porque se for para algum componente interno até é utilizando mas, se isso for refletir para vários outros não é a melhor forma de fazer esse código, mas, vou deixar como exemplo para estudos:
function App(props) {
const [color, setColor] = React.useState("#d3d3d3");
function handleState() {
if (color === "#d3d3d3") {
setColor("#FFFF00");
} else {
setColor("#d3d3d3");
}
}
return (
<React.Fragment>
<div style={{backgroundColor: color}}>{color}</div>
<Button handleState={handleState}/>
</React.Fragment>
)
}
function Button(props) {
return (<button onClick={props.handleState}>Mudar</button>);
}
function Root () {
return (
<div>
<App />
</div>
)
}
ReactDOM.render( <Root/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
Então vai depender da sua estratégia, essas duas formas são bem utilizadas, mas, precisa planejar.
Referencias: