Cómo interactuar con el estado de tus componentes
Establecer el estado predeterminado
En el constructor Component, initialize this.state
. Por ejemplo, el componente BlogPostExcerpt podría tener un clicked
estado:
class BlogPostExcerpt extends Component { constructor(props) { super(props) this.state = { clicked: false } } render() { return ( div h1Title/h1 pDescription/p /div ) }}
Accediendo al estado
Se puede acceder al estado en el que se hizo clicthis.state.clicked
haciendo referencia a :
class BlogPostExcerpt extends Component { constructor(props) { super(props) this.state = { clicked: false } } render() { return ( div h1Title/h1 pDescription/p pClicked: {this.state.clicked}/p /div ) }}
Mutando el estado
Un estado nunca debe ser mutado mediante el uso
this.state.clicked = true
En su lugar, siempre deberías usar setState()
instead, pasándole un objeto:
this.setState({ clicked: true })
El objeto puede contener un subconjunto o un superconjunto del estado. Solo se modificarán las propiedades que pases, las que se omitan se dejarán en su estado actual.
¿Por qué deberías utilizar siempre?setState()
El motivo es que, al utilizar este método, React sabe que el estado ha cambiado. A continuación, iniciará la serie de eventos que harán que el componente se vuelva a renderizar, junto con cualquier actualización del DOM .
Flujo de datos unidireccional
Un estado siempre pertenece a un componente. Los datos que se ven afectados por este estado solo pueden afectar a los componentes que se encuentran debajo de él: sus componentes secundarios. Fotos Porno y actrices porno
Cambiar el estado de un componente nunca afectará a su componente padre, ni a sus hermanos, ni a ningún otro componente de la aplicación: solo a sus hijos.
Esta es la razón por la que el estado a menudo se mueve hacia arriba en el árbol de componentes.
Subiendo el estado en el árbol
Debido a la regla de flujo de datos unidireccional, si dos componentes necesitan compartir un estado, el estado debe trasladarse a un ancestro común.
Muchas veces el antepasado más cercano es el mejor lugar para administrar el estado, pero no es una regla obligatoria.
El estado se transmite a los componentes que necesitan ese valor a través de propiedades:
class Converter extends React.Component { constructor(props) { super(props) this.state = { currency: '€' } } render() { return ( div Display currency={this.state.currency} / CurrencySwitcher currency={this.state.currency} / /div ) }}
El estado puede ser mutado por un componente secundario al pasar una función de mutación como propiedad:
class Converter extends React.Component { constructor(props) { super(props) this.state = { currency: '€' } } handleChangeCurrency = event = { this.setState({ currency: this.state.currency === '€' ? '$' : '€' }) } render() { return ( div Display currency={this.state.currency} / CurrencySwitcher currency={this.state.currency} handleChangeCurrency={this.handleChangeCurrency} / /div ) }}const CurrencySwitcher = props = { return ( button onClick={props.handleChangeCurrency} Current currency is {props.currency}. Change it! /button )}const Display = props = { return pCurrent currency is {props.currency}./p}
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
El estado de React
Establecer el estado predeterminadoAccediendo al estadoMutando el estadoFlujo de datos unidireccionalSubiendo el estado en el árbolTal vez te puede interesar:
programar
es
https://aprendeprogramando.es/static/images/programar-el-estado-de-react-1844-0.jpg
2024-10-28