Update reference-react.md #237
Conversation
The docs don't mention that `key` and `ref` can be overwritten with `cloneElement(element, {key: ..., ref: ...})` and `children` can also be overwritten with `cloneElement(element, {children: ...})`.
|
Deploy preview ready! Built with commit 73cc5ea |
|
|
||
| `React.cloneElement()` is almost equivalent to: | ||
|
|
||
| ```js | ||
| <element.type {...element.props} {...props}>{children}</element.type> | ||
| ``` | ||
|
|
||
| However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element. |
There was a problem hiding this comment.
I think this is a useful sentence. Maybe we could just tweak the wording slightly?
Except that it also preserves
refs by default. This means that if you get a child with arefon it, you won't accidentally steal it from your ancestor. You will get the samerefattached to your new element.
There was a problem hiding this comment.
I think this sentence is very unclear though. Is "child with a ref on it" referring to a child of the cloned element or the cloned element itself? In any case, it's basically just restating what the sentence before the code example says.
Maybe the clearest thing to say would be "cloneElement preserves the refs of all descendants of the element being cloned".
There was a problem hiding this comment.
You could replace, "child with a ref on it" with something more like, "if you clone an element that has a ref".
There was a problem hiding this comment.
but up above the code example it already says "key and ref from the original element will be preserved."
| @@ -103,16 +103,14 @@ React.cloneElement( | |||
| ) | |||
| ``` | |||
|
|
|||
| Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved. | |||
| Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children, if passed as `...children` or otherwise `props.children`, will replace existing children. `key` and `ref` from the original element will be preserved unless `props` contains `key` or `ref` (which will overwrite the `key` or `ref` in the cloned element, respectively). | |||
There was a problem hiding this comment.
The new wording is informative but it reads a little confusingly to me. How do you feel about just slightly tweaking what was there before?
Clone and return a new React element using
elementas the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children.keyandreffrom the original element will be preserved unless they are explicitly overridden.
There was a problem hiding this comment.
Hmmm, how can we be precise without being confusing? "explicitly overridden" doesn't make it clear that they can be overridden by mixing key or ref in with the other props passed to cloneElement. To me that's not obvious unless explicitly stated because key and ref are like pseudoprops. I guess the code example does make that clear, if one thinks through what it means.
And as far as children goes, "new children will replace existing children" doesn't clarify that existing children can be preserved -- it seems to imply that if ...children and props.children are not provided, then the cloned element will have no children.
The fact that children can be overridden via props.children instead of ...children is also not obvious at all. I'm trying to fully and correctly document all behavior of cloneElement, which really isn't that trivial...
Sync with reactjs.org @ 133aa06
…actjs#237) * docs(cn): translate content/blog/2016-07-11-introducing-reacts-error-code-system.md to chinese * docs(cn): format style in content/blog/2016-07-11-introducing-reacts-error-code-system.md * Update content/blog/2016-07-11-introducing-reacts-error-code-system.md Co-Authored-By: Yuqing Chen <mr.chenyuqing@live.com> * Update content/blog/2016-07-11-introducing-reacts-error-code-system.md Co-Authored-By: Yuqing Chen <mr.chenyuqing@live.com>
The docs don't mention that
keyandrefcan be overwritten withcloneElement(element, {key: ..., ref: ...})andchildrencan also be overwritten withcloneElement(element, {children: ...}).