Question

export utilities = {
    assignOptions: function(newOption, callback) {
        //Incorrect 'this' context on second binding
        this.props.updateOptions((prevOptions) => Object.assign({}, prevOptions, newOption), callback);
    }
};

export const FirstComponent = (WrappedComponent) => class extends React.Component {
    constructor(props) {
        super(props);   

        utilities.assignOptions = utilities.assignOptions.bind(this);
        utilities.assignOptions("test"); //'this' context is FirstComponent
    }
};

export const SecondComponent = (WrappedComponent) => class extends React.Component {
    constructor(props) {
        super(props);   

        utilities.assignOptions = utilities.assignOptions.bind(this);
        utilities.assignOptions("test2"); //'this' context is still FirstComponent instead of SecondComponent
    }
};

它似乎是导出的同一个实例，因此绑定不起作用。如何每次导出新实例？

Answer 1

问题可能是JS如何处理对象与ES6类中的上下文。像我认为你正在尝试的那样做一个简单的道具注射方法是创建一个包裹你的组件的HOC：

function wrapComponent(ComponentToWrap) {
  return class WrappedComponent extends React.Component {
    render() {
      return <ComponentToWrap {...this.props}/>
    }
  }
}

这是一个简单的例子，但认为你可以使用尽可能多的逻辑，并希望在每个WrappedComponent中注入你想要的任何道具。

Javascript导出新的对象实例

1 个答案: