1

我正在尝试从 mixins 重构为 HOC，以便我可以升级到最新的 React（我目前正在使用 React 13/ES5）。当我的组件加载时，mixin 能够访问一个this.data具有query路由属性的数据对象。

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

在componentDidMount mixin 内部，它将查询该路由，取回数据并将其置于状态。

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

这从我的组件中提取了很多样板。我不必componentDidMount在每个组件上运行 a，只需拥有data对象即可。

我把这个 mixin 分散在整个项目中。它实际上做的远不止这些，但我只是想把它简化一下，例如起见。

HOC 进来了。我把所有的东西都拿出来data放进去getInitialState。现在我已经data了解了现在包装的组件的状态，我该如何访问它？和我的 mixin 一样，我希望我的 HOC 能够处理我的componentDidMount、访问data.query和获取数据。我不想必须重写每个组件才能拥有componentDidMount.

PS-我通常使用最新版本的 React 和 ES6，如果有人能告诉我为什么 mixin 可以做this.data而我的组件不能，那将非常有帮助。在最新版本的 React 中，你不能定义除此之外的对象render()。

4

1 回答 1

1

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

从反应文档：

State 类似于 props，但它是私有的，完全由组件控制。

所以你可以做的是使用props而不是state. 对于给定的示例，您可以编写高阶组件，如下所示。但是您的 Child 组件应该更改为从而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 可以做到 this.data 而我的组件不能，那将非常有帮助。在最新版本的 React 中，您不能像这样在 render() 之外定义对象。

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

class A{
  constructor(){
    this.foo = "foo"
  }
}
于 2017-04-02T08:20:28.210 回答