Javascript 如何将元素附加到要在react中呈现的变量

给定如下（）所示的react组件：

var Hello=React.createClass({
render:function（）{
设{cond，name}=this.props；
让内容，内容2；
如果（秒）{
content=（Hello{name}）；
content2=（content2）；
}
返回(
{content}
{content2}
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

我如何实现以下目标：

content += (<div>content 2</div>) //not working

content+=（content 2）//不工作

然后在单个内容变量中呈现内容，而不是同时呈现内容和内容2？

var Hello=React.createClass({
var Hello = React.createClass({
  render: function() {
    let { cond, name } = this.props;
    let content, content2, contents;
    if (cond){
        content = (<div>Hello { name } </div>);
      content2 = (<div>content 2</div>);
      contents = [content, content2];
    }

    return (
        <div>
        { contents }
      </div>
    )
  }
});

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

render:function（）{
设{cond，name}=this.props；
让内容，内容2，内容；
如果（秒）{
content=（Hello{name}）；
content2=（content2）；
contents=[内容，内容2]；
}
返回(
{contents}
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

---

答案有效，但react将显示警告：数组或迭代器中的每个子级都应具有唯一的“键”属性。为了使它在没有警告的情况下工作，我们必须向数组中的每个项添加键。数组中的每个元素都需要key={}属性，以便react可以跟踪虚拟dom中的每个新元素

var Hello = React.createClass({
  render: function() {
    let { cond, name } = this.props;
    let content, content2, contents;
    if (cond){
        content = (<div>Hello { name } </div>);
      content2 = (<div>content 2</div>);
      contents = [content, content2];
    }

    return (
        <div>
        { contents }
      </div>
    )
  }
});

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