如何使父组件包含子组件

Question

我正在用reactjs和svg编写模型查看器。我想让一个父组件包含一组子组件。

子组件根据其标签文本宽度自动调整大小。但是，为了计算最小的封闭矩形，父组件应如何访问子大小？

问题似乎是如何在组件层次结构中向上传递信息。

// 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'));

在此尝试代码https://jsfiddle.net/dagrende/ep6xrLqy/1/。