Question

我正在启动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')
);

将两个组件都呈现在容器中是否可行？

我试过了：

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

但那不起作用。

我该怎么做？

Answer 1

您必须将它们包装到容器中，否则不可能。

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

Answer 2

您只能渲染一个组件，如果要渲染多个组件，然后将它们包装在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')
);

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

2 个答案: