Dynamisches Rendern einer React-Komponente in React 0.12

Question

I asked this question previously, aber mit React 0.12 und den JSX-Änderungen, die es brachte, suche ich jetzt nach einer anderen Möglichkeit, diese Funktion zu implementieren.

Hier ist der Code, der in Reaktion 0.11 funktioniert:

return React.createClass({ 
    render: function() { 

     var Tag = React.DOM[this.props.element]; 

     return (
     <Tag className='text'> 
      {this.props.value} 
     </Tag> 
    ); 
    } 
}); 

ich eine Komponente mache, die in „Element“ genannt unterschiedliche DOM-Elemente auf der Basis der Stütze geführt macht. this.props.element einen Wert wie „p“, „h1“ oder „h2“ usw. sein Während dies technisch funktioniert, ich bin eine Warnmeldung in der Konsole zu sehen:

Warning: Do not pass React.DOM.p to JSX or createFactory. Use the string "p" instead. 
Warning: Do not pass React.DOM.h2 to JSX or createFactory. Use the string "h2" instead. 

eine Richtung benötigen um zu helfen, diese Warnung zu interpretieren, und ich kann keine gute Dokumentation finden, um so etwas zu tun.

Answer 1

extrem einfache Antwort auf diese (+1 für React 0,12 Herstellung Dinge einfacher!), Aber alles, was getan werden musste, ist die React.DOM [] Teil der Variablendefinition zu entfernen, vorbei an der Stringliteral:

return React.createClass({ 
    render: function() { 

     var Tag = this.props.element; 

     return (
     <Tag className='text'> 
      {this.props.value} 
     </Tag> 
    ); 
    } 
}); 

Funktioniert wunderbar; ohne irgendwelche Konsolenwarnungen!