只有在道具中满足某些条件时才添加 HoC答案

【问题标题】：Only add HoC if certain condition is met in the props只有在道具中满足某些条件时才添加 HoC
【发布时间】：2018-12-21 02:45:10
【问题描述】：

我正在使用 recompose 库和 HoC 为我的组件传递一堆道具。我想知道在compose 中是否有办法在设置 HoC 之前检查道具。例如，假设我有这样的事情：

export default compose(
  withProps(props => ({
    shouldUseWithMyHoc: someCondition() // true or false
  })),
  withState('someState', 'setSomeState', ''),
  withHandlers({
    doStuff: props => evt => {
      // do stuff
    }
  }),
  withMyHoc() // should only use if `shouldUseWithMyHoc` prop is true
)(MyComponent)

我该怎么做才能使withMyHoc 仅在shouldUseWithMyHoc 设置为true 时使用？

我想过也许做一个三元组，但那并不顺利，当条件为假时我没有什么可回退的。它看起来像这样：

  export default compose (
  ...
  (props) => {(
    props.shouldUseWithMyHoc
    ? withMyHoc()
    : null)}
  )(MyComponent)

通过使用三元，我得到以下错误：

警告：无法在未安装的组件上调用 setState（或 forceUpdate）。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请在 componentWillUnmount 方法中取消所有订阅和异步任务。

有什么办法可以完成这项工作吗？如果这看起来是正确的，那我做错了什么？

【问题讨论】：

这是获得它的唯一方法。关于错误，你能发布你的MyComponent吗？
感谢您的帮助。事实证明，我可以使用branch HoC 来做到这一点。我不知道为什么会发生最初的错误，但分支解决了它。

标签： reactjs higher-order-components recompose

【解决方案1】：

原来我只是需要在谷歌上更好地表达我的问题。来自recompose 的branch HoC 解决了我的问题，指定为here

对于我的组件，当我完成应用分支时，它是这样的：

export default compose(
  withProps(props => ({
    shouldUseWithMyHoc: someCondition() // true or false
  })),
  withState('someState', 'setSomeState', ''),
  withHandlers({
    doStuff: props => evt => {
      // do stuff
    }
  }),
  branch(
    (props) => props.shouldUseWithMyHoc,
    withMyHoc()
  )
)(MyComponent)

【讨论】：