我如何在React中不通过HOC（高阶组件）访问方法/函数？

Question

我有一个高阶组件。 我可以从HOC继承props到Wrapped Component中，但是我也想继承它的方法/函数。 做这个的最好方式是什么。

我想使用this.myHocFunc ，而不是this.props.myHocFunc 。 我也不想将this.myHocFunc映射到Wrapped Component内部的this.props.myHocFunc 。 所有逻辑需要理想地发生在HOC组件内

这是我的HOC组件：

import React, { Component } from "React";

export var MyEnhance = ComposedComponent => class extends Component {
    constructor() {
        super();
    }

    myHocFunc(text) {
        // text should be 'hello world'
        console.log(text);
    }  

    componentDidMount() {
    }

    render() {
        return <ComposedComponent {...this.props} />;
    }
};

这是我包装的组件：

import React from 'react';
 import ReactDOM from 'react-dom';
 import { MyEnhance } from "./enhance";

 @MyEnhance
 class MyComponent extends React.Component {
   render() {
     return <button onClick={this.myHocFunc('hello world')}</div>;
   }
 };

 ReactDOM.render(<MyComponent />, document.getElementById('root'));

提前致谢

Answer 1

这似乎是一项继承工作，例如

class MyEnhancedComponent extends React.Component {
  myHocFunc(text) {
    console.log(text);
  }
}

class MyComponent extends MyEnhancedComponent {
  render() {
    return <button onClick={() => this.myHocFunc('hello world')}</div>;
  }
}

我不确定您对MyEnhance的其他要求是什么，但是您可能使事情变得过于复杂。 否则，您也可以显式添加该功能。

export var MyEnhance = ComposedComponent => class extends Component {
  // ...

  enhance(instance) {
    instance.myHocFunc = this.myHocFunc.bind(instance);
  }

  render() {
    return this.enhance(<ComposedComponent {...this.props} />);
  }
}

最后，如果您真的不能使用“常规”继承，则可以看看traits模式以具有多个继承。 我还为此编写了一个很小的库 。