在JSX中扩展数组

Question

我想从帮助器render函数返回多个元素，但我不想为每个元素添加键。例如：

class Foo extends React.Component {
  _renderBar() {
    return [
      'hello ',
      <b>world</b>,
    ]
  }

  render() {
    return (
      <div>
        {this._renderBar()}
      </div>
    );
  }
}

由于JSX编译为React.createElement个调用，而React.createElement接受元素作为它的第三个和更高的参数，我想在{{1}时传播_renderBar返回的数组调用。

例如，我的代码目前编译为：

React.createElement

由于我没有数组元素上的键，我收到警告。我希望它是这样的：

React.createElement(
  'div',
  null,
  ['hello ', React.createElement(
    'b',
    null,
    'world'
  )]
);

我尝试过React.createElement( "div", null, "hello ", React.createElement( "b", null, "world" ) ); ，但它无法正常工作。

Answer 1

我认为有一种方法可以用JSX做到这一点。最简单的解决方案是直接调用React.createElement：

React.createElement(
  'div',
  null,
  ...this._renderBar()
);