javascript - react : Insert One Component After Another

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

我最终得到了这个错误:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

有人知道如何将这两个组件附加到 #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 - 但它似乎有效。