React：一个接一个地插入一个组件

Question

很简单，我有一个这样的 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(...): Target 容器不是 DOM 元素。

任何人都知道如何将这两个组件附加到#App div 中？我必须将#App 设为父组件吗？

提前致谢！

Answer 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 - 但它似乎工作。