reactjs - 用 Prop 重组

Question

我正在努力了解重组的工作原理。虽然我理解它的基本概念，但我在使用 withProps 函数时遇到了问题。如果我尝试使用它来装饰带有附加 Prop 的组件的每个子组件，它根本无法工作。我所做的是:

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

而且它根本不起作用。我不得不改为执行 React.cloneElement。你能帮我一下吗？ Here's一个沙箱。请注意 WrappedComponent.js 行号 9

编辑(我遇到问题的代码...)
所以这很好用:

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

但是我想使用重构来编写它。正如我之前所说，如果我尝试使用 withProps(action)(child) 而不是 cloneElement，它将无法工作 -> 不会呈现任何内容。如果我尝试通过 withProps(action)(child)() 强制组件呈现，应用程序会崩溃。
一般来说，我想知道如何使用重组来表达整个 WrappedComponent.js。我不喜欢当前实现的是我必须手动管理 ref 因为我正在使用的底层组件(这里是 Wrap)需要它，这是我无法改变的(第 3 方库)。我也很想使用 recompose 来处理它

我希望这个小小的解释能让我更清楚地知道我在追求什么。

Answer 1

withProps 返回一个函数，其输入是另一个组件(注意 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