javascript - props - Reactjs cómo cambiar el estado de un componente de un componente diferente

react comunicacion entre componentes

Question

Tengo un componente de reacción, vamos a llamarlo como componente 1

define([..., /path/component_2.jsx], function(..., Component2) {
   var Component1 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      componentDidMount: function() {
          .......
          dates = ....;
          Component2.setState({dates: dates});
      }
       render: function() { return (<div ...></div>) }
   });
}

Como puede ver, estoy llamando a Component2.setState en este componente. Pero recibo un error como setState no es una función. Intenté esto con la definición de una función personalizada en lugar de la función setState en el componente 2 y llamando a esta función desde el componente 1, pero obtengo el mismo error, ''no es una función''.

Y el componente 2:

define([..., ], function(...) {
   var Component2 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      render: function() { return (<div ...></div>) }
   });
}

Entonces, supongo que en reactjs llamamos un componente solo para renderizar algo (React DOM elements)? y no puede cambiar el estado del componente?

Si es así, ¿cómo puedo cambiar el estado de un componente de un componente diferente que no es un niño o un padre de primero?

Answer 1

Los componentes no exponen públicamente su estado. También es importante recordar que el estado tiene un alcance para la instancia de los componentes, no su definición.

Para comunicarse entre componentes, puede rodar su propio servicio de suscripción a eventos.

var events = new EventEmitter();

// inside Component1
events.emit(''change-state'', newState);

// inside Component2
events.on(''change-state'', function(state) {
  this.setState(state);
});

Sin embargo, esto se volverá difícil de manejar rápidamente.

Una solución más sensata es usar Flux . Le permite administrar explícitamente el estado de su aplicación completa y suscribirse a cambios en diferentes partes del estado, dentro de sus componentes. Vale la pena intentar abarcarlo con la cabeza.

El componente que desea comunicarse debe enviar una acción y esta acción será responsable de cambiar algo en las tiendas, su otro componente debe suscribirse a esa tienda y puede actualizar su estado en función del cambio.

Answer 2

Puede usar un estado compartido entre los dos componentes. Puedes construir un "mixin" así

app.mixins.DateMixin = {
   getInitialState: function () 
      return {
          dates: []
         }
      }
};

y luego en tus componentes puedes incluir esta mixins usando la matriz de mixins

define([..., /path/component_2.jsx], function(..., Component2) {
   var Component1 = React.createClass({

      mixins: [app.mixins.DateMixin],

      getInitialState: function() {
         return {.......};
      },

      componentDidMount: function() {
          .......
          dates = ....;
          this.setState({dates: dates});
      }
       render: function() { return (<div ...></div>) }
   });
}

define([..., ], function(...) {

   mixins: [app.mixins.DateMixin],

   var Component2 = React.createClass({
      getInitialState: function() {
         return {.......};
      },

      render: function() { return (<div ...></div>) }
   });
}

Ahora sus componentes comparten el estado "fechas" y usted puede cambiarlo / verificarlo en ambos. NB: también puedes compartir métodos de la misma manera escribiendo en un componente de mezcla.

Editar: sugiero que visite este sitio web http://simblestudios.com/blog/development/react-mixins-by-example.html