Rotareti Rotareti - 4 months ago 69
Javascript Question

Why does `this.refs` return undefined in this simple example?

In the following example

this.refs.foo.clientWidth
returns
undefined
and I can't figure out why. How can I get the reference to
SomeComp
in
PageComp
to use its width? (using React 15.2.1 or similar)

class PageComp extends React.Component {

componentDidMount() {
console.log(this.refs.foo.clientWidth);
}

render() {
return (
<div>
<p>{this.props.name}</p>
<SomeComp ref="foo" />
</div>
);
}
}

class SomeComp extends React.Component {
render() {
return (
<div>
<h1>I loaded</h1>
</div>
);
}
}


ReactDOM.render(
<PageComp name="Joe Schmoe"/>,
document.getElementById('react_example')
);


JSBIN

Answer

this.refs.foo returns React Element. But if you want to work with DOM element - you need to find this Node

React 15.0.1 Requires this syntax: ReactDOM.findDOMNode

JSBIN: http://jsbin.com/xabidaquti/1/edit?html,js,console,output

Comments