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

Я пытаюсь провести рефакторинг от миксинов до HOC, чтобы я мог перейти на новейший React (в настоящее время я использую React 13/ES5). Когда мой компонент загружается, миксин может получить доступ к объекту данных this.data, у которого есть свойство query с маршрутом.

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

В componentDidMount внутри миксина он запросит этот маршрут, вернет данные и поместит их в состояние.

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

Это извлекает много шаблонов из моих компонентов. Мне не нужно запускать componentDidMount для каждого компонента, достаточно иметь объект data.

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

Входит HOCs. Я взял все вещи из data и вложил в getInitialState. Теперь, когда у меня есть data в состоянии обернутого компонента, как мне получить к нему доступ? Как и мой миксин, я хочу, чтобы мой HOC обрабатывал мой componentDidMount, получал доступ к data.query и извлекал данные. Я не хочу переписывать каждый компонент, чтобы иметь componentDidMount.

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


reactjs higher-order-components mixins ecmascript-5
person user2465134    schedule 01.04.2017    source источник
comment
ответить на этот вопрос будет проще, если вы захотите опубликовать свой код HoC   -  person Lewis Chung    schedule 02.04.2017
comment
я не согласен. если вы не можете ответить на это на самом базовом уровне, как вы можете ответить на него с дополнительной сложностью   -  person user2465134    schedule 02.04.2017
comment
Это не очень приятно. Ваш вопрос было довольно сложно понять из-за того, как вы его написали. Я нашел время, чтобы прочитать его и пытался придумать решение, адаптированное для вас. Если вам нужен расплывчатый ответ: вы можете использовать любой из стандартных шаблонов, в которых дочерние компоненты должны взаимодействовать с родительскими компонентами. Передайте вещи дочерним элементам через реквизиты (вы можете передать состояние своей оболочки дочернему элементу в качестве реквизита). Если вашим дочерним элементам необходимо связаться с родителем, попросите родителя передать ему функцию обработчика.   -  person Lewis Chung    schedule 02.04.2017
comment
Либо переформулируйте свой вопрос, чтобы было немного понятнее, к чему вы пытаетесь добраться, либо опубликуйте некоторый псевдокод вашего компонента более высокого порядка, чтобы я мог дать лучший ответ.   -  person Lewis Chung    schedule 02.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

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"
  }
}
person Tharaka Wijebandara    schedule 02.04.2017