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} />);
  }
}

最后，如果你真的不能使用＆＃34;正常＆＃34;继承，您可以查看traits模式以获得多重继承。我还为此写了very tiny library。

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

1 个答案: