Javascript在同一个div中呈现多个组件

Javascript在同一个div中呈现多个组件,javascript,reactjs,Javascript,Reactjs,我正在启动ReactJs,下面有两个组件和一个渲染调用: var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); var Hello2 = React.createClass({ render: function() { return <div>Hello2 {this.props.n

我正在启动ReactJs,下面有两个组件和一个渲染调用:

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')
);
var Hello=React.createClass({
render:function(){
返回Hello{this.props.name};
}
});
var Hello2=React.createClass({
render:function(){
返回Hello2{this.props.name};
}
});
ReactDOM.render(
,
document.getElementById('容器')
);
是否可以在容器中呈现这两个组件

我试过:

ReactDOM.render(
  <Hello name="World" />,
  <Hello2 name="World2" />,
  document.getElementById('container')
);
ReactDOM.render(
,
,
document.getElementById('容器')
);
但那没用


我该怎么做呢?

您必须将这些包装到容器中,否则不可能

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

您只能渲染一个组件,如果要渲染多个组件,然后将它们包装到div或任何其他包装元素中,请使用以下代码:

ReactDOM.render(
  <div>
     <Hello name="World" />
     <Hello2 name="World2" />
  </div>
  document.getElementById('container')
);
ReactDOM.render(
document.getElementById('容器')
);
或者我们也可以在这里使用数组,但不要忘记分配键。像这样:

ReactDOM.render(
  [
     <Hello name="World" key={0} />
     <Hello2 name="World2" key={1} />
  ]
  document.getElementById('container')
);
ReactDOM.render(
  <React.Fragment>
     <Hello name="World" />
     <Hello2 name="World2" />
  </React.Fragment>
  document.getElementById('container')
);
ReactDOM.render(
[
]
document.getElementById('容器')
);
更新:

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

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

这也不起作用:ReactDOM.render(、document.getElementById('container');请删除逗号。