在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接受元素作爲它的第三和較高的參數，我想_renderBar傳播返回的數組時React.createElement被調用。

例如，我的代碼目前編譯成這樣的事情：

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

因爲我沒有對數組元素的鍵，我得到一個警告。我希望它是這樣的：

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

我想這樣做{...this._renderBar()}，但它不工作。

Answer 1

我不認爲有一種方法可以用JSX來做到這一點。最簡單的解決方案是直接撥打React.createElement：

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