将函数从props传递到组件外部(高阶组件)

问题描述 投票:0回答:2

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

包裹组件:

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,我怎样才能将functionscreen component传递到HOC?

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

reactjs react-native
2个回答
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()}
         );
      }
   }
}

0
投票

听起来您希望能够将其他参数传递给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/的示例代码

© www.soinside.com 2019 - 2024. All rights reserved.