javascript - 我如何在不将其作为 Prop 传递的情况下从 React 中的 HOC(高阶组件)访问方法/函数？

Question

我有一个高阶组件。我可以从 HOC 将 props 继承到我的 Wrapped Component 中，但我也想继承它的方法/函数。执行此操作的最佳方法是什么。

我想使用 this.myHocFunc，而不是 this.props.myHocFunc。我也不想在 Wrapped Component 内将 this.myHocFunc 映射到 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为此。