Question

对于多个React组件，我想在React的生命周期中注入一个公共代码有什么好办法吗？

var ComponentA = React.createClass({
    componentWillMount: function () {

    },
    componentDidUpdate: function(){
      //inject common code
    },...

var ComponentB = React.createClass({
    componentWillMount: function () {

    },
    componentDidUpdate: function(){
      //inject common code
    },...

Answer 1

您的意思是仅在多个组件之间共享功能吗？如果是这样，您可以将它们保存在单独的文件中，并将其导入到您需要的位置：

// common js

function hello() {
  console.log('hello');
}

module.exports = hello;

// your component
var hello = require('./common');

var ComponentA = React.createClass({
    componentDidUpdate: function(){
      hello();
    },//...

http://www.webpackbin.com/Nk80m1x_W

您可以做的另一件事是创建一个包装器（更高阶）组件：

var WrapperComponent = React.createClass({
  componentDidUpdate: function() {
     // code you want to inject.
  },
  render: function () {
    return(<div>{this.props.children}</div>);
  }
});

然后，只要您需要使用具有该生命周期的组件，就可以在jsx中执行此操作：

<WrapperComponent>
   <ComponentA />
</WrapperComponent>

Answer 2

虽然@jzm建议的高阶分量方法是better，但你也可以使用mixins：

var myMixin = {
      componentWillMount: function(){
         //common code
      },
      componentDidUpdate: function(){
        //common code
      }
};
var ComponentA = React.createClass({
   mixin: [myMixin]
});
var ComponentB = React.createClass({
   mixin: [myMixin]
})

如何在React中的组件中注入公共代码

2 个答案: