我正在使用重组库,并且彼此之间构建了一堆HoC,每个都需要以前的props作为参数。看起来像这样:

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)


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

我确实认为造成麻烦的原因之一是因为我不太了解道具是如何传递的,所以我很抱歉,如果这只是我的愚蠢之举。

最佳答案

这可以通过定制的HOC解决:

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

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

10-08 05:22