用道具重组

Question

我正在努力弄清楚重组的工作原理。 尽管我了解它的基本概念，但是使用withProps函数还是有问题。 如果我尝试使用它来用其他道具装饰组件的每个子组件，则它根本无法工作。 我要做的是：

const decorateChild = withProps({ /* some additional props */ });
// ... later on
{ React.Children.map(this.props.children, decorateChild) }

而且根本不起作用。 我不得不做React.cloneElement 。 你能帮我吗。 这是一个沙盒。 请注意WrappedComponent.js行号9

编辑 （我有问题的代码...）
所以这很好用：

const decorateChild = actions => child =>
  typeof child === "function"
    ? child(actions)
    : React.cloneElement(child, actions);

但是我想用重组编写它。 正如我以前说过，如果不是的cloneElement我尝试做withProps(action)(child)将无法正常工作- >没有被渲染。 如果我尝试通过withProps(action)(child)()强制组件进行渲染，则应用程序将崩溃。
通常，我想知道如何使用recompose来表达整个WrappedComponent.js 。 对于当前的实现，我不满意的是我必须手动管理ref，因为我正在使用的底层组件（此处为Wrap ）需要它，而这是我无法更改的（第三方库）。 我也很乐意使用重组来处理它

我希望这个小解释可以使我更加清楚自己的目标。

Answer 1

withProps返回一个函数，该函数的输入是另一个Component（请注意，此处的child是组件的输出，即表示该组件的不透明JS对象）， decorateChild(action)应返回不透明的数据结构，这说明了为什么需要将其称为再次功能

以下内容看起来可能比您对React.cloneElement但它可以工作：

const decorateChild = actions => child => {
  const Component = (props) => ({ ...child, props: { ...child.props, ...props } })
  return typeof child === "function"
    ? child(actions)
    : withProps(actions)(Component)();
    // this also works
    // : withProps(actions)((props) => React.cloneElement(child, props))();
};

https://codesandbox.io/s/mjx0626wx8