2

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.

2

2 respuestas 2

2

para pasar la info de un componente a otro debes usar preferiblemente los props, aqui te explico un poco en base a un ejemplo de https://reactjs.org/docs/components-and-props.html.

Hagamos de cuenta que te encuentras en el App.tsx ( o Jsx ) y has importado el componente Welcome, procederemos a crearlo como si fuera una etiqueta de Html y a colocar los datos que necesites pasar con la sintaxis propiedad="valor"; una vez hecho esto podras dentro del componente llamar a los datos con {props.author.nombreProps}

En el app.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Welcome } from './Welcome ';
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

En el Welcome.tsx

class Welcome React.Component{

    constructor(props) {
    super(props);
    };

    public render() {
    return (
    <div> 
         <p>{props.name}</p>
    </div>
    }  
 }

Espero haber sido claro, quedo atento a cualquier duda. Un feliz día.

3
  • Me parece tu respuesta interesante, aunque no trabajo TypeScript, si no Javascript directamente, no se si te equivocaste al poner, tsx. Gracias, no conocía esta forma. el 4 abr. 2018 a las 22:41
  • 1
    Es con todo el gusto, y disculpa, se me paso ese detalle, ya que el React lo estoy usando con Net Core y ese te obliga a usar el TypeScript, igual bueno no hay problema, ya que comparte buena parte de la sintaxis. Saludos. el 5 abr. 2018 a las 6:10
  • Gracias de nuevo, espero algún día aprender TypeScript. el 5 abr. 2018 a las 15:59
1

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.

3
  • 1
    Disculpa, que pasa, si los valores que se van a retornar primero no son del padre al hijo, eso ya lo he visto en muchos, busco es como retornar de los hijos al padre, por ejemplo, en mi caso, las operaciones empiezan en el componente_dos por llamarlo así, y luego debería retornar estos al componente padre, y luego poder enviarlo a otro componente, que puede ser, componente_nuevo, ya con este ejemplo, según veo, me sirve para pasarlo del padre a los hijos. el 3 abr. 2018 a las 18:00
  • 1
    Las props comunican del padre al hijo. Para que la comunicación vaya del hijo al padre, hazlo mediante el manejador. En el padre hay un manejador que es pasado como prop al hijo, fíjate en el método handleCalcula que puse de ejemplo. El nombre de esa prop no importa, le puse "onResponse" para indicar que es un evento, pero el evento sucede en el hijo y al final lo controla el padre; en el padre recibes en response del método "handleResponseFromComponente2" el valorDeRespuesta que envías en "handleCalcula" del hijo. el 4 abr. 2018 a las 0:57
  • Gracias por la aclaración, disculpa, y como envío dicho valor, a oto hijo que necesito? el 4 abr. 2018 a las 3:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.