I'm trying to access DOM element in react because it need for third party library. And I'm able to do it with refs for built in react elems. Like <div ref={this.someRef} <span ref={this.otherRef} etc.

And I can access DOM elem thru this.someRef.current But when I'm trying to do same trick for custom elements <SomeCustomElem ref={this.anotherRef}, this.anotherRef.current returns me an object of values and I dont see any way to access DOM elem with custom ponents.

Is there any chance to get access to DOM of custom elem?

I'm trying to access DOM element in react because it need for third party library. And I'm able to do it with refs for built in react elems. Like <div ref={this.someRef} <span ref={this.otherRef} etc.

And I can access DOM elem thru this.someRef.current But when I'm trying to do same trick for custom elements <SomeCustomElem ref={this.anotherRef}, this.anotherRef.current returns me an object of values and I dont see any way to access DOM elem with custom ponents.

Is there any chance to get access to DOM of custom elem?

• javascript
• reactjs

• btw what does that 3rd party library you want to use? if it modifies DOM of elements given all its changes will be rewritten on next render() – skyboyer Commented Oct 15, 2018 at 8:53

4 Answers 4

You can use react-dom to access any type of DOM element which is shipped with react.

To access the DOM pass a ref with the react element and latter access it with findDOMNode method.

Example:

import ReactDOM from 'react-dom';

...  

let reactElement = ReactDOM.findDOMNode(this.refs.refName)

...  

<Component ref='refName'/>

This depends on what kind of ponent SomeCustomElem is.

For <SomeCustomElem ref={this.anotherRef}/>, ReactDOM findDOMNode can be used:

findDOMNode(this.anotherRef.current);

This cannot be done if SomeCustomElem is functional ponent. Neither ref nor findDOMNode will work on it.

ReactDOM.findDOMNode(<Any React Element>)  //Returns a DOM node 


//eg. Using "this" inside a react el.
ReactDOM.findDOMNode(this).scrollIntoView()

Make sure to try-catch it as it might return null

findDOMNode is suggested to avoid:

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the ponent abstraction.

You can forward ref instead.

But just think about that in a way "ref links you to given ponent". So maybe you just use separated prop like that:

class CustomComponent extends Component {
    render() {
        return (<div ref={this.props.outerDivRef}> .... </div>);
    }
}

class Parent extends Component {
    constructor() {
        this.innerRef = React.createRef();
    }

    render() {
        return (<CustomComponent outerDivRef={this.innerRef} />);
    }
}

Besides last pattern is older than ref forwarding feature but it looks like more flexible one.