我的目标是在页面/父组件上动态添加组件.
我从一些基本的示例模板开始,如下所示:
主要的js:
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));
应用程序.js:
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
<div id="myId">myId div</div>
</div>
);
}
});
采样组件.js:
var SampleComponent = React.createClass({
render: function() {
return (
<div>
<h1>Sample Component! </h1>
</div>
);
}
});
这里SampleComponent
被安装到<div id="myId"></div>
node 上,这是在App.js
模板中预先编写的.但如果我需要在应用程序组件中添加无限数量的组件,该怎么办?很明显,我不能坐在那里.
在阅读了一些教程之后,我仍然不了解组件是如何创建并动态添加到父组件的.什么是一种方法?