JSXで配列を展開する

Question

ヘルパーのrender関数から複数の要素を返したいが、各要素にキーを追加したくない。たとえば：JSXはReact.createElement呼び出しにコンパイルし、それは3次以上の引数だとしてReact.createElementが要素を受け入れているので

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

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

、私はReact.createElementが呼び出された_renderBarによって返された配列を広めたいです。例えば

、私のコードは、現在、このような何かにコンパイル：

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

私は配列要素のキーを持っていないので、私は警告が表示されます。私はそれがこのような何かになりたい：私は{...this._renderBar()}をやってみました

React.createElement(
    "div", 
    null, 
    "hello ", 
    React.createElement(
    "b", 
    null, 
    "world" 
) 
); 

が、それは動作しません。

Answer 1

私はJSXでこれを行う方法はないと思います。最も簡単な解決策はReact.createElementに直接電話することです：

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