Javascript ReactJs 在同一个 div 中渲染多个组件

Question

我开始使用 ReactJs，我有 2 个组件和下面的渲染调用:

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var Hello2 = React.createClass({
  render: function() {
    return <div>Hello2 {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

是否可以在容器中渲染这两个组件？

我试过:

ReactDOM.render(
  <Hello name="World" />,
  <Hello2 name="World2" />,
  document.getElementById('container')
);

但这没有用。

我该怎么做？

Answer 1

你只能渲染一个组件，如果你想渲染多个然后将它们包装在一个 div 或任何其他包装元素中，使用此代码:

ReactDOM.render(
  <div>
     <Hello name="World" />
     <Hello2 name="World2" />
  </div>
  document.getElementById('container')
);

或者我们也可以在这里使用数组，但不要忘记分配键。像这样:

ReactDOM.render(
  [
     <Hello name="World" key={0} />
     <Hello2 name="World2" key={1} />
  ]
  document.getElementById('container')
);

更新:

在 React 16+ 中，我们可以使用 React.Fragment ，好处是，它不会在 dom 中添加任何额外的节点。像这样:

ReactDOM.render(
  <React.Fragment>
     <Hello name="World" />
     <Hello2 name="World2" />
  </React.Fragment>
  document.getElementById('container')
);