Реакция: компоненты более высокого порядка: можете ли вы дочернее состояние

React.createClass({
  mixins: [myMixin],
  data: {
    query: "/api/foo"
  },
  componentDidUpdate(): function(){
  }
  ...
}

var myMixin = React.createClass({
  componentDidMount(): function(){
    this.fetchData(this.data.query)
  }
  fetchData(query) {
    // fetch the data
  }
  ...
}

Ответ 1 · рейтинг 1 · Tharaka Wijebandara

React не поощряет изменение state вне компонента. state принадлежит компоненту, поэтому только компонент имеет над ним контроль.

Из документации React:

Состояние похоже на свойства, но оно является частным и полностью контролируется компонентом.

Так что вы можете использовать props вместо state. Для данного примера вы можете написать компонент высшего порядка следующим образом. Но ваш дочерний компонент должен быть изменен для отображения данных из props вместо state.

function HOC(WrappedComponent){

  return React.createClass({

    getInitialState: function() {
      return { data: null };
    },

    componentDidMount: function(){
      this.fetchData(WrappedComponent.prototype.data.query)
    },

    fetchData: function(query){
     // Fetching data first
     // Then set the state with data
     this.setState({data:data});
    },

    render: function() {
      var props = Object.assign({}, this.props, this.state);
      return React.createElement(WrappedComponent, props);
    }

  });

}

var HOCChild = HOC(Child);

PS- Я обычно использую новейшую версию React и ES6, если кто-нибудь может сказать мне, почему миксин может сделать это. данные, а мой компонент не может, это было бы очень полезно. В новейшей версии React вы не можете определить объект вне render() таким образом.

Обычно компонент React определяется как класс ES6. Классы ES6 не поддерживают статические свойства или свойства экземпляра. Но вы можете определить свойства экземпляра внутри подрядчика следующим образом.

class A{
  constructor(){
    this.foo = "foo"
  }
}