0

Tenho uma função que muda um estado, só que preciso receber essa função em outro componente e aplicar no botão que vai executar a função. Quando coloco um botão nesse mesmo componente, consigo executar a função de mudar o tema da página. Mas o problema é que o botão de mudar o tema tem que ser em outro componente.

function App() {
  
  const [theme , setTheme] = useState(false)
  const mudarTema = () => {
    
    theme === false ? setTheme(true) : setTheme(false)
  }
 

  return (
   

    <>

    <div className="App" >
    
     {theme && <Light />  }
    <Rotas />
   
    </div>
    
    <Footer />
   
    </>
  )
}

export default App


onde o botão está: 


export const Header = () => {

  const [showMenu, setShowMenu] = useState(false)
  const [hidenav , setHideNav] = useState(true)


  return(
   
   <header className="header" >
   
    {hidenav && 
       <nav className="nav" >
     
       
          <div className="logo"><Link to="/">
            <img src={Logo} />
            </Link></div>

            <button  >MUDAR TEMA</button>
            <BotaoTema />


             <button className="botao-menu">
              <GiHamburgerMenu onClick={() => {setShowMenu(true); setHideNav(false)} }  />
             </button> 
     
       </nav>
       }

..... cortei o restante do código, pra facilitar a leitura, pois o botão é aí onde tá escrito "MUDAR TEMA"

1 Resposta 1

0

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:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .