React:在另一个组件之后插入一个组件

时间:2016-07-13 16:44:50

标签: javascript reactjs

很简单,我有一个像这样的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作为父组件?

提前致谢!

1 个答案:

答案 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 - 但它似乎有效。