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

Question

给定如下所示的 React 组件 ( https://jsfiddle.net/69z2wepo/28684/ ):

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

    return (
      <div>
        { content }
        { content2 }
      </div>
    )
  }
});

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

我怎样才能实现这样的目标:

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

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

Answer 1

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')
);

https://jsfiddle.net/69z2wepo/28687/