很简单,我有一个像这样的HTML结构:
<div id="App" class="ui container">
<div id="Keywords" class="left"></div>
<div id="Users" class="right"></div>
<div class="clear"></div>
<div id="Nav"></div>
</div>
我正在追加我的组件:
ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#Keywords'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#Users'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));
我想摆脱#Keywords
和#Users
div。我只想将我的组件附加到#App
div。我试过这样的事情:
ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#App'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#App'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));
我最终得到了这个错误:
未捕获错误:不变违规:_registerComponent(...):目标 容器不是DOM元素。
任何人都知道如何将这两个组件附加到#App
div中?我是否必须将#App
作为父组件?
提前致谢!
答案 0 :(得分:1)
你可以这样做:
let Main = React.createClass({
render: function() {
return <div className="container main">
<Feed listenTo="users" />
<Feed listenTo="keywords" />
<Nav />
</div>;
}
});
React.render(
<Main />,
document.getElementById('app')
);
我已加入此fiddle。
它使用已删除的React.render而不是ReactDOM.render - 但它似乎有效。