Pasar accesorios a un componente a través del estado

Pasar accesorios a un componente a través del estado

Prefijo:

Estoy trabajando con react-native y me pregunto cuál es la mejor práctica para pasar accesorios de un componente primario a uno secundario. He probado esto solo en mi dispositivo Android.

Pregunta:

Según tengo entendido, es posible pasar valores a un componente mediante el uso de accesorios, es decir:

<myComponent myProp="some data" />

y se puede hacer referencia a él en myComponent usando this.props.myProp. ¿Sería una mala práctica (o incluso funcionaría) crear mi objeto de estado en el constructor así:

constructor(props){
  super(props);
  this.state = {
    myStateProp: this.props.myProp
  };
}

que luego podría llamarse en ese componente como this.state.myStateProp. Soy relativamente nuevo en reaccionar nativo y estoy tratando de aprender tanto como puedo. Lo probé en varios casos de uso con resultados variables y no estoy seguro del comportamiento. ¡Gracias por tu aporte!

Mostrar la mejor respuesta

Claro, puedes hacer esto.

Hay pocas buenas razones para hacer esto. Por lo general, se considera un antipatrón porque los componentes deben ser sin estado siempre que sea posible.

Si lo que está tratando de hacer es controlar el componente pasando accesorios y usándolo como estado, le sugiero mantener el estado en el componente principal y luego pasar cualquier cambio hacia arriba en la cadena a través de accesorios, usando una devolución de llamada.

Por ejemplo

ComponentOne {
    this.state = { colour:red }

    handleColourChange(val){
        this.setState({ colour: val })
    }

    return <ComponentTwo changeColour={this.handleColourChange} colour={this.state.colour} />
}

Entonces imagina que en ComponentTwo tenemos un botón y quieres cambiar de color:

<button onClick={this.changeColour(blue)}>Change to blue</button>

De esta manera, su componente secundario permanece sin estado y es controlado por su componente principal. this.props.colour cambiará en el niño automáticamente.