如何从React中的HOC（高阶组件）访问方法/函数而不将其作为道具传递？

Question

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

我想使用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模式有多重继承。我也为此写了一个very tiny library。