@waweca

Как получить state из другого компонента в React.js?

В общем есть два компонента.

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

  componentWillMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        this.setState({
          data: data
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

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


var Comp2 = React.createClass({
  render: function() {
    return (
        <div>
          {this.state.data} // ?
        </div>
    );
  }
});


Первый компонент делает/получает запрос.
Как во втором компоненте использовать данные полученные/вызванные первым компонентом?

Или правильно делать для каждого компонента свой запрос?
  • Вопрос задан
  • 4874 просмотра
Решения вопроса 2
Если не придерживаться flux архитектуры то так:
var Comp1 = React.createClass({
//code
render: function() {
    return (
        <div>
         <Comp2 data={this.state.data} />
        </div>
    );
  }
});
var Comp2 = React.createClass({
  render: function() {
    return (
        var fromOne = this.props.data;
        <div>
          {fromOne}
        </div>
    );
  }
});

А если придерживаться flux-са то вам нужен Dispatcher и Store. При получение данных с сервера вы передаете данные в хранилище при помощи Dispatcher, после этого хранилище говорит что данные изменились, а в компонентах вы ставите прослушку на изменение данных. И как только произошло изменение, вы берете свежие данные из хранилища и уже делаете с ними что хотите.
Ответ написан
@vsuhachev
Касаясь общего вопроса - компоненты для этого и сделали компонентами, чтобы инкапсулировать их поведение, иначе будет опять всеми любимый спагетти-код. Рекомендую все же потратить время на освоение flux, это однозначно нужная вещь. Можно начать с этой статьи. Ну и redux заслуживает внимания - это одна из реализаций концепции flux.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы