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上的这2个抽屉，我不想在每个屏幕上放置抽屉的配置，这就是我为此创建一个HOC的原因。我的问题是，HOC上抽屉上的list在每个屏幕上都是dynamic，并且我在每个屏幕上设置了specific function，如何通过function从screen component到HOC？

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

Answer 1

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

$ ls
--ig o e='.gitco fig
desktop.i i
hidde  file.txt'

（高阶组件）：

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

export default bar(foo);

Answer 2

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

edit：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);

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

来自https://spin.atomicobject.com/2017/03/02/higher-order-components-in-react/

的示例代码

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

2 个答案: