Reactjs 反应：高阶组件：您可以更改childs状态吗

我正在尝试从mixin重构到HOCs，这样我就可以升级到最新的React（我目前正在使用React 13/ES5）。当我的组件加载时，mixin能够访问一个数据对象，

this.data

，该对象具有带有路由的

query

属性

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

在mixin内部的

componentDidMount

上，它将查询该路由，获取数据并将其置于状态

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

这从我的组件中提取了很多样板文件。我不必在每个组件上运行

componentDidMount

，只需使用

data

对象即可

我把这个混音分散在整个项目中。它实际上比这做的多得多，但我只是试着让它安静下来

在HOCs中。我从

数据

中取出所有的东西，放入

getInitialState

。现在我有了关于现在包装的组件状态的

数据

，如何访问它？像我的mixin一样，我希望我的HOC处理我的

组件didmount

，访问

数据。查询
并获取数据。我不希望必须重写每个组件才能拥有
componentDidMount

PS-
我通常使用最新版本的React和ES6，如果有人能告诉我为什么mixin可以做到这一点。在最新版本的React中，您不能像这样在
render（）
之外定义对象。
React不鼓励从组件外部更改
状态。
状态
由组件所有，因此只有组件可以控制它

发件人：

国家类似于道具，但它是私有的，完全由政府控制
组件

因此，您可以使用
道具
而不是
状态
。对于给定的示例，您可以编写高阶组件，如下所示。但是您的子组件应该更改为从
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
告诉我为什么mixin可以这样做。数据和我的组件不能
那将非常有帮助。在最新版本的React中，您不能
像这样在render（）之外定义一个对象

通常，React组件定义为ES6类。ES6类不支持静态或实例属性。但是您可以像这样在承包商内部定义实例属性

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

如果你愿意发布你的代码，回答这个问题会更容易。我不同意。如果你不能在最基本的层面上回答这个问题，你怎么能更复杂地回答这个问题呢？这不是很好。你的问题很难理解，因为你的写作方式。我花时间阅读了它，并试图想出一个适合您的解决方案。如果您想要一个模糊的答案：您可以使用任何标准模式，其中子组件需要与父组件通信。通过道具将东西传递给孩子（您可以将包装器的状态作为道具传递给孩子）。如果您的孩子需要与家长沟通，请让家长向其传递一个处理函数。要么改写您的问题，以便更清楚地了解您的意图，要么发布一些高阶组件的伪代码，以便我能提供更好的答案。