用道具重組

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