在React中动态添加子组件

我的目标是在页面/父组件上动态添加组件。

我从这样的一些基本示例模板开始：

main.js：

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.js：

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.js：

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

此处SampleComponent已安装到<div id="myId"></div>预写在App.js模板中的节点上。但是，如果我需要向App组件中添加不确定数量的组件怎么办？显然，我不能将所有必需的div都坐在那里。

在阅读了一些教程之后，我仍然不了解如何动态创建组件并将其动态添加到父组件。有什么办法呢？