Question

我正在尝试从mixins到HOC重构，所以我可以升级到最新的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对象。

我把这个mixin分散在整个项目中。它实际上做的远不止这些，但我只是试图将它愚蠢，例如清酒。

来自HOCs。我从data获取了所有内容并输入getInitialState。现在我对现在包装的组件的状态有data，我该如何访问它？就像我的mixin一样，我希望我的HOC处理我的componentDidMount，访问data.query并获取数据。我不想重写每个组件以获得componentDidMount。

PS- 我通常使用最新版本的React和ES6，如果有人能告诉我为什么mixin可以做this.data而我的组件不会那么有用。在最新版本的React中，您无法像{1}那样定义render()之外的对象。

Answer 1

React并不鼓励从组件外部更改state。 state由组件拥有，因此只有组件可以控制它。

来自React documentation：

状态类似于道具，但它是私有的，完全受制于组件。

所以你可以做的是使用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，如果有人可以的话告诉我为什么mixin可以做这个.data和我的组件不能这将非常有帮助。在最新版本的React中你不能在render（）之外定义一个对象。

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

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

反应：高阶组件：孩子可以说

1 个答案: