Erweitern eines Arrays in JSX

Question

Ich möchte mehrere Elemente aus meinem Helfer render Funktionen zurückgeben, aber ich möchte nicht jedem Element Schlüssel hinzufügen. Zum Beispiel:

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

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

Da JSX kompiliert React.createElement Anrufe und React.createElement nimmt Elemente wie es dritte ist und höhere Argumente, möchte ich das Array von _renderBar zurück zu verbreiten, wenn React.createElement genannt wird.

Zum Beispiel mein Code kompiliert gerade etwas wie folgt aus:

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

Da ich keine Tasten auf den Array-Elementen haben, habe ich eine Warnung. Ich möchte es so etwas sein:

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

ich {...this._renderBar()} versucht zu tun, aber es funktioniert nicht.

Answer 1

Ich glaube nicht, dass es eine Möglichkeit gibt, dies mit JSX zu tun. Die einfachste Lösung wäre, React.createElement direkt anzurufen:

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