Reactjs как изменить состояние компонента из другого компонента

у меня есть компонент react, давайте назовем его компонентом 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>) }
   });
}

Как вы можете видеть, я вызываю Component2.setState в этом компоненте. Но я получаю ошибку, как setState не является функцией. Я попробовал это с определением пользовательской функции вместо функции setState в компоненте 2 и вызовом этой функции из компонента 1, но я получаю ту же ошибку, "не является функцией".

и компонент 2:

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

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

поэтому я думаю, что в reactjs мы вызывает компонент только для рендеринга чего-либо (React dom elements)? и не может изменить состояние компонента?

Если да, то как я могу изменить состояние компонента из другого компонента, который не является дочерним или родительским для first?

11
backbone.js javascript reactjs ruby-on-rails-4

2 ответов

компоненты публично не раскрывают свое состояние. Также важно помнить, что состояние ограничено экземпляр компонентов, а не их определение.

для связи между компонентами вы можете запустить собственную службу подписки на события.

var events = new EventEmitter();

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

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

однако, это быстро станет трудно управлять.

более разумным решением является использование Flux. Это позволяет четко контролировать состояние вашего все приложение и подписаться на изменения в различных битах состояния, в пределах ваших компонентов. Стоит попытаться понять это.

компонент, который хочет общаться, должен отправить действие, и это действие будет отвечать за изменение чего-то в магазинах, ваш другой компонент должен подписаться на это хранилище и может обновить его состояние на основе изменения.

10

вы можете использовать общее состояние между двумя компонентами. Вы можете построить "mixin", как это 

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

и затем в вас компоненты вы можете включить этот mixins с помощью массива 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>) }
   });
}

теперь ваши компоненты разделяют состояние "даты", и вы можете изменить/проверить его в обоих из них. NB: вы также можете поделиться методами таким же образом, написав в компонент mixin.

Edit: я предлагаю вам посетить этот веб-сайт http://simblestudios.com/blog/development/react-mixins-by-example.html

1