【问题标题】:Pass down props as a parameter to another HoC within compose将 props 作为参数传递给 compose 中的另一个 HoC
【发布时间】:2019-02-06 18:05:25
【问题描述】:

我正在使用 recompose 库,并且有一堆相互构建的 HoC,每个都需要以前的道具作为参数。看起来是这样的:

export default compose(
  withSomeHoC(param1, param2),
  withAnotherHoc(myFunction.bind(undefined, requiredValuePassedAsPropsFromWithSomeHoC)),
)(MyComponent)

如您所见,withAnotherHoC 所需的参数必须来自道具。但我不知道我怎么能得到它。这是我已经尝试过的:

只是使用箭头函数希望它们会被传入:

export default compose(
  withSomeHoC(param1, param2),
  (ownerProps) => withAnotherHoc(myFunction.bind(undefined, ownerProps.myRequiredParam))
)(MyComponent)

使用withProps函数:

export default compose(
  withSomeHoC(param1, param2),
  withProps(ownerProps => withAnotherHoc(myFunction.bind(undefined, ownerProps.myRequiredParam)))
)(MyComponent)

到目前为止,这些都不起作用,那么我该如何完成呢?

我确实认为我遇到麻烦的原因之一是因为我不太了解道具是如何传承下来的,所以如果这只是我的愚蠢行为,我深表歉意。

【问题讨论】:

  • myFunction 是什么?请提供所有相关代码。由于问题可能发生在任何列出的 HOC 中,因此stackoverflow.com/help/mcve 是必要的。
  • 它应该与问题无关,但myFunction 进行了 GET 调用,我需要来自道具的参数是我从中获取对象的 id。与此相关的部分就是我如何访问道具以将其用作myFunction中的参数@
  • 那么函数的返回值呢?组件应该在什么时候使用它?
  • 函数的返回值只是一个对象,我想将它作为另一个道具传递给组件。
  • 所有这些都在 withAnotherHoC 内的另一个 HoC 中处理,它工作得很好。这里的问题只是访问myFunction的参数的那些道具

标签: javascript reactjs higher-order-components


【解决方案1】:

这可以通过自定义 HOC 解决:

const myHoc = Comp => props => {
  const CompWithAnotherHoc = withAnotherHoc(myFunction(props.myRequiredParam))(Comp);
  return <CompWithAnotherHoc ...props />;
};

export default compose(
  withSomeHoC(param1, param2),
  myHoc
)(MyComponent)

【讨论】:

    猜你喜欢
    • 2020-01-26
    • 1970-01-01
    • 2019-12-02
    • 2020-03-14
    • 2013-10-13
    • 1970-01-01
    • 1970-01-01
    • 2023-01-18
    相关资源
    最近更新 更多