Como enviar/retornar parámetros entre dos o mas componentes

publicado por: Anonymous

Quisiera saber como enviar parámetros/información entre dos o mas componentes. Por ejemplo, si en un componente se ejecutan una serie de operaciones aritméticas o que vaya retornar alguna petición sea cual sea, POST, GET, retornar dicho valor, para ser usado en otro componente y así sucesivamente.

En mi caso, las operaciones van a empezar en el componente hijo, el cual llame, Componente_2, los resultados de estos, deberán ser usados en el otro hijo, el cual llame Componente_3.

Según he investigado, pude saber, que en React existe muy bien definido el tema de herencia, o así lo comprendí, y debe ser respetado, ya que existe un padre, el cual se comunica con muchos hijos.

Componente_1.jsx (Padre)

class componente1 extends Component{
   //captura los valores iniciales
   //por teclados o de una API
   //los envia a los ficheros correspondiente
}

Componente_2.jsx (Hijo)

class componente2 extends Component{
   //recibe los valores iniciales 
   //del componente 1
   //resolverá alguna operación y 
   //deberá retornar dicho resultado
   //al terminar la operacion
}

Componente_3.jsx (Hijo)

class componente3 extends Component{
   //que exista la posibilidad de tomar los valores  
   //retornados del componente 2 al componente 1
   //para luego realizar una operación
   //y retornarlos al terminar
}

Nota: Asumo que no importa si los ficheros están en la misma carpeta, ya que considero eso irrelevante en el tema del proceso.

solución

Lo que debes hacer es comunicarte a través de props de un componente a otro.

Primero que nada, para trabajar en un componente padre con lo que te retorne el otro componente (hijo), debes tener un manejador de evento:

handleResponseFromComponente2(response){
    ...
}

Y cuando tengas que montar al componente2 pásale propiedades a partir del estado del componente1, así:

render() {
    ...
    <componente2 numero={this.state.num} operacion={this.state.op} onResponse={this.handleResponseFromComponente2.bind(this)} />
    ...
}

Y en el constructor del componente2:

React 15 e inferior

(Documentación de esta versión)

class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: props.numero,
            operacion: props.operacion
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.numero == this.state.numero && nextProps.operacion == this.state.operacion){
            return null;
        }
        else{
            this.setState({
                numero: nextProps.numero,
                operacion: nextProps.operacion
            });
        }
    }

    // Para invocar al evento en el padre:
    handleCalcula(e){
        ... // Lo que quieras hacer aquí
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

React 16 y superior

(Documentación de esta versión)

class componente2 extends Component{
    constructor(props){
        super(props);
        this.state = {
            numero: null,
            operacion: null
        };
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if(nextProps.numero == prevState.numero && nextProps.operacion == prevState.operacion){
            return null;
        }
        return{
            numero: nextProps.numero,
            operacion: nextProps.operacion
        }
    }

    handleCalcula(e){
        ...
        this.props.onResponse(valorDeRespuesta);
    }
    ...
}

Observa el cambio de componentWillReceiveProps a static getDerivedStateFromProps. Con esta nueva versión de React hay algunas consideraciones que debes tener (en inglés) para mantenerte al día, cosa que te recomiendo.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *