joshwcomeau / joshwcomeau/react-flip-move
Removing `findDOMNode`
- Dominant language
- JavaScript
- Stars
- 4.1k
- Forks
- 250
- PR merge metrics
- No merged PRs in 30d
Description
Hey @joshwcomeau. I look at #88 and saw [your comment](https://github.com/kdemoya/react-flip-move/blob/4ae798c45ca847daf7b33dc7465982f29aab7f35/src/dom-manipulation.js#L193-L195):
```
// While ReactDOM's `findDOMNode` is discouraged, it's the only
// publicly-exposed way to find the underlying DOM node for
// composite components.
```
I've been reading up on `findDOMNode`, there's a discussion at yannickcr/eslint-plugin-react#678. I thought I'd just leave a comment here detailing how one might remove use of this function. I'm not necessarily convinced this is a good idea.
First option is `FlipMove` would expect each child to be a html element, adding a `ref` with `cloneElement`. This means library consumers will have to wrap custom components in an `li` or `div`. `FlipMove` would just assume that all instances returned by `ref` are elements (erroring/warning otherwise).
Another option might be to require the custom child components to expose a `containerRef` prop.
```js
// `containerRef` prop required/supplied by `FlipMove`
function Custom({ containerRef, text }) {
return
}
function List({ items }) {
const itemElements = items.map(item =>
)
return {itemElements}
}
```
FlipMove can do something like:
```js
childrenWithRefs() {
return this.state.children.map(child => {
const ref = domNode => {
if (!this.childrenData[child.key]) {
this.childrenData[child.key] = {};
}
this.childrenData[child.key].domNode = domNode;
}
// If it's a html element, then we just use `ref`, otherwise require `containerRef`.
return isHtmlElement(child.type)
? React.cloneElement(child, { ref })
: React.cloneElement(child, { containerRef: ref })
})
}
```
Nice thing about this approach is that it means you can use stateless function components since they just have to pass the `ref` up via props.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.