It's not that refs
isn't defined, it's that you're trying to access the DOM at the same time you are trying to generate it. this.refs.svg.getDOMNode
will not return anything because the component has no real DOM representation in render
.
To keep this more React-y, I would move cx
to the component's state and update it after the element has been rendered to the DOM:
var App = React.createClass({
componentDidMount: function() {
var svg = this.refs.svg.getDOMNode();
this.setState({
cx: svg.offsetLeft + Math.round(svg.offsetWidth / 2)
});
},
getInitialState: {
return {
cx: 0
};
},
render: function() {
return (
<svg ref="svg">
<circle r="9" cx={this.state.cx} cy="15" />
</svg>
);
}
});