将函数从props传递到组件外部（高阶组件）

Question

我试图从类外的高阶组件传递函数，因为我需要调用它，但它也需要传回。很难解释，这是代码：

包裹组件：

class foo extends React.Component {
    ....
}

foo.list = [
   {
      name: "Home",
      action: this.props.funcFromHoc //this.props.from foo class, how can i access this because it is outside the component?
   }
]

export default bar(foo);

高阶组件：

export default function bar(WrappedComponent) {

   funcFromHoc() {
      alert("Hello from HOC function!");
   }

   render() {
      return (
         <WrappedComponent 
            { ...this.props }
            funcFromHoc={ this.funcFromHoc }
      );
   }
}

我实际上在做什么：我有一个带有base screen (HOC)的2 drawers，它有一些控制它们行为的功能。我需要在many screens上使用这两个抽屉，我不想在每个屏幕上放置抽屉的配置，这就是我为此创建一个HOC的原因。我的问题是，HOC抽屉上的list在每个屏幕上都是dynamic，而且我们在每个屏幕上设置了specific function，我怎样才能将function从screen component传递到HOC？

我错过了什么或者这个吗？我做错了吗？我是否错过了一些高阶组件的正确使用方法？或者我应该用什么方法呢？任何提示或帮助将非常感谢。谢谢。

Answer 1

我找到了一个解决方案，它使用继承反转解决了我的问题。

class foo extends React.Component {
   list() {
     return [
        {
           name: "Home",
           action: this.funcFromHoc //successfully accessed it here!
        }
     ];
   }
}

export default bar(foo);

（高阶组件）：

export default function bar(WrappedComponent) {
   return class Bar extends WrappedComponent {

      funcFromHoc() {
         alert("Hello from HOC function!");
      }

      render() {
         return (
            //call super.list() here to populate drawer list
            {super.render()}
         );
      }
   }
}

Answer 2

听起来您希望能够将其他参数传递给HOC。调用HOC时可以传递映射函数，如下面的颜色变量。请注意，HOC的定义也略有不同，以便采用其他参数。

编辑：nevermind，你将无法访问funcFromFoo，除非它是foo的支柱（即在mapDispatchToProps中定义）。嘿 - 我试过了。可能需要重新考虑设计，因此这不是必需的。

function doSomethingWithList(props) {
  const { actionName, funcFromHOC, funcFromFooProps } = props;
  if (actionName === 'Home') {
    funcFromHOC();
  } else {
    funcFromFooProps();
  }
}; 

const makeToggleable = (WrappedComponent, color) => {
  return class ToggleableComponent extends React.Component {
    constructor(props) {
      super(props);

      this.state = { toggled: false };
      this.toggleColor = this.toggleColor.bind(this);
    }

    toggleColor() {
      this.setState({ toggled: !this.state.toggled });
    }

    render() {
      const fontColor = this.state.toggled? color: 'black';
      return (
        <WrappedComponent { ...this.props }
          style={{color: fontColor}}
          onClick={this.toggleColor} />
      );
    }
  }
}

export default makeToggleable(BaseComponent, 'red');

const listItems = [ 'Home', 'Other' ]; 

export default bar(foo, listItems, doSomethingWithList);

传递listItems和doSomethingWithList为OP的问题，修改HOC以使用道具调用doSomethingWithList

来自https://spin.atomicobject.com/2017/03/02/higher-order-components-in-react/的示例代码