Как получить доступ к одному состоянию компонента из другого компонента

Как мне получить доступ к одному состоянию компонента в другом компоненте? Ниже мой код, и я пытаюсь получить доступ к состоянию компонента a в компоненте b.

var a = React.createClass({
    getInitialState: function () {
        return {
            first: "1"
        };
    },

    render: function () {
        // Render HTML here.
    }  
});

var b = React.createClass({
    getInitialState: function () {
        return {
            second: a.state.first
        };
    },

    render: function () {
        // Render HTML here.
    }  
});

Но я ничего не получаю.

Ответ 1

Даже если вы попытаетесь сделать это, это неправильный метод доступа к state. Лучше иметь родительский компонент, чьи дети a и b. ParentComponent будет поддерживать state и передавать его в качестве реквизита для детей.

Например,

var ParentComponent = React.createClass({
  getInitialState : function() {
    return {
      first: 1,
    }
  }

  changeFirst: function(newValue) {
    this.setState({
      first: newValue,
    });
  }

  render: function() {
   return (
     <a first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
     <b first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
   )
 }
}

Теперь в ваших дочерних компонентах a и b используйте переменную first, используя this.props.first. Если вы хотите изменить значение функции first call this.props.changeFirst() функции ParentComponent. Это изменит значение и будет таким образом отражено как у детей a, так и b.

Я пишу компонент a здесь, b будет похож:

var a = React.createClass({

  render: function() {
    var first = this.props.first; // access first anywhere using this.props.first in child
    // render JSX
  }
}

Ответ 2

Если двум компонентам нужен доступ к одному и тому же состоянию, у них должен быть общий предок, в котором сохраняется состояние.

Итак, компонент A является родительским элементом B и C. Компонент A имеет состояние и передает его в качестве реквизита B и C. Если вы хотите изменить состояние из B, вы передадите функцию обратного вызова в качестве опоры.

Ответ 3

Я бы посоветовал вам использовать менеджер состояний, такой как Redux (личный фаворит), MobX reflux и т.д. Для управления вашим состоянием.

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

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

Посмотрите здесь: http://redux.js.org/

РЕДАКТИРОВАТЬ: Redux это хорошо, но стандартный код действительно отключить... для тех из вас, кто ищет более простое, более волшебное (это может быть хорошо и плохо) решение, используйте mobx: https://mobx.js.org/

Ответ 4

в дочернем компоненте создайте функцию, которая устанавливает состояние:

changeTheState(){
   this.setState({something:"some value"})
}

и в родительском компоненте дать ребенку ссылку следующим образом:

<Child ref={component => this._child = component}/>

Затем в родительском сделать функцию для доступа к changeTheState()

  parentFunction(){
this._child.changeTheState();

} и просто используйте parentFunction.

Ответ 5

Ладно всем Пожалуйста, давайте серьезно отнесемся к функциональному программированию. Итак, вернемся к ответу на ваш вопрос. создайте реквизит, который является функцией, вероятно, названной this.props.sendValue(this.state), и инициализируйте функцию в родительском компоненте. <NewComponent><Component sendValue={(args)=> return(args)}/></NewComponent>

ЛОЛ. На самом деле не пробовал это, но это должно быть решением вашего вопроса