[英]Recompose withProps
I am trying to get my head around on how recompose works. 我正在努力弄清楚重组的工作原理。 Although I understand the underlying concept of it I have a problem with using
withProps
function. 尽管我了解它的基本概念,但是使用
withProps
函数还是有问题。 If I try using it for decorating each child of a component with additional props it simply fails to work. 如果我尝试使用它来用其他道具装饰组件的每个子组件,则它根本无法工作。 What I do is:
我要做的是:
const decorateChild = withProps({ /* some additional props */ });
// ... later on
{ React.Children.map(this.props.children, decorateChild) }
And it simply doesn't work. 而且根本不起作用。 I had to do
React.cloneElement
instead. 我不得不做
React.cloneElement
。 Could you please help me with that. 你能帮我吗。 Here's a sandbox.
这是一个沙盒。 Please, notice
WrappedComponent.js
line number 9 请注意
WrappedComponent.js
行号9
EDIT (The code I have problem with...) 编辑 (我有问题的代码...)
so this works fine: 所以这很好用:
const decorateChild = actions => child =>
typeof child === "function"
? child(actions)
: React.cloneElement(child, actions);
however I wanted to have it written using recompose. 但是我想用重组编写它。 As I said before, if instead of
cloneElement
I try to do withProps(action)(child)
it won't work -> nothing gets rendered. 正如我以前说过,如果不是的
cloneElement
我尝试做withProps(action)(child)
将无法正常工作- >没有被渲染。 If I try forcing the component to render by withProps(action)(child)()
the app crashes. 如果我尝试通过
withProps(action)(child)()
强制组件进行渲染,则应用程序将崩溃。
In general, I wonder how entire WrappedComponent.js
could be expressed using recompose. 通常,我想知道如何使用recompose来表达整个
WrappedComponent.js
。 What I dislike about current implementation is how I have to manually manage ref because the underlying component that I'm using (here Wrap
) requires it and this is something I cannot change (3rd party library). 对于当前的实现,我不满意的是我必须手动管理ref,因为我正在使用的底层组件(此处为
Wrap
)需要它,而这是我无法更改的(第三方库)。 I would also love to handle it using recompose 我也很乐意使用重组来处理它
I hope this little explanation makes it a bit more clear what I'm after. 我希望这个小解释可以使我更加清楚自己的目标。
withProps
returns a function whose input is another Component (note that child
here is the output of a component ie the opaque JS object that represents it), also decorateChild(action)
should return the opaque data structure which explains why you need to call it as a function again withProps
返回一个函数,该函数的输入是另一个Component(请注意,此处的child
是组件的输出,即表示该组件的不透明JS对象), decorateChild(action)
应返回不透明的数据结构,这说明了为什么需要将其称为再次功能
Probably the following looks worse than what you did with React.cloneElement
but it works: 以下内容看起来可能比您对
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 https://codesandbox.io/s/mjx0626wx8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.