how to make parent component enclose children - svg

Question

I'm writing a model viewer with reactjs and svg. I want to make a parent component enclose a group of child components.
The child components are automatically sized according to their label text width. But how should the parent component get access the child sizes in order to calculate the smallest enclosing rect?
The problem seems to be how to communicate information upwards in the component hierarchy.
// child automatically sized after text width
var Child = React.createClass({
componentDidMount: function () {
var rect = this.refs.rect.getDOMNode();
var text = this.refs.text.getDOMNode();
rect.setAttribute('width', text.offsetWidth + 8);
},
render: function() {
return <g transform={'translate(' + this.props.x + ', ' + this.props.y + ')'}>
<rect ref="rect" height={50} fill="#cfc"/>
<text ref="text" x={4} y={15}>{this.props.text}</text>
</g>;
}
});
// parent that I want to automatically enclose all children
var Parent = React.createClass({
render: function() {
return <g>
<rect x={10} y={10} width={200} height={100} fill="#ccf"/>
<Child text="first child" x={20} y={20}/>
<Child text="second child" x={180} y={80}/>
</g>;
}
});
var Diagram = React.createClass({
render: function() {
return <svg width={300} height={250}><Parent/></svg>;
}
});
React.render(<Diagram/>, document.getElementById('container'));
Try the code here https://jsfiddle.net/dagrende/ep6xrLqy/1/.