Sou iniciante no React e estou com o seguinte problema:
Tenho três componentes extends Component
que preciso que se comuniquem.
São eles uma NavBar e dois conteúdos estáticos.
O conteúdo da NavBar (texto e ícones) são alterados conforme o conteúdo (componente) que é carregado.
A solução que eu achei para atualizar a NavBar foi o window.localStorage
já que são não posso deixar os conteúdos como componentes filhos da NavBar.
O render()
da NavBar está condicional para cada item do localStorage
.
O item do localStorage
está sendo atualizado normalmente porém ele não é renderizado na tela.
Tem alguma maneira de se alterar state
dos components
que são irmãos e não filhos para não precisar usar o localStorage
?
-
posta o código que você fez. Fica melhor pra opinar– Danilo Cândido26/10/2018 às 10:59
1 Resposta
Não é possível alterar o state
dos components
que são irmãos, pois o React lida com dados unidirecionais.
Veja o seguinte esquema para entender como React lida com dados entre componentes:
Note que os dados não são passados entre os componentes irmãos, mas sim recebidos pelo componente pai através das props
.
No momento em que os dados são alterados no componente pai através do setState
, em seguida o ReactJS chama o método render()
do componente pai (e consequentemente de seus filhos com os dados atualizados).
Uma possível abordagem é criar um componente 'pai' dos componentes que armazena os dados que seus filhos irão utilizar. Assim, é possível passar para os filhos as funções que manipulam esses dados (somente o próprio componente deve alterar seu state
).
Abaixo segue um exemplo genérico de como isso seria possível: o componente pai possui uma variável numero
que é alterada por um filho:
class PaiDeTodos extends React.Component {
constructor(props) {
super(props)
this.state = { numero: 123 }
}
alterarNumero = (novoNumero) => {
this.setState({numero: novoNumero});
}
render () {
return <Navbar/>
<ConteudoEstatico this.props.alterarNumero=alterarNumero>
}
}
Componente filho recebeu através das props
a função alterarNumero, que será chamada no clique do botão e por alterar o state
do pai, causará a chamada do método render()
do pai:
class ConteudoEstatico extends React.Component {
cliqueBotao = () => {
this.props.alterarNumero(555);
}
render () {
return <button onClick={this.cliqueBotao}>Clique aqui.<button/>
}
}