Rendering dinamico di un componente React in React 0.12

Question

I asked this question previously, ma con React 0.12 e le modifiche JSX apportate, sto cercando un altro modo per implementare questa funzione.

Ecco il codice che funziona in React 0,11:

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

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

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

Sto facendo un componente che rende diversi elementi DOM in base al puntello passato in chiamato "elemento". this.props.element sarà un valore come "p", "H1" o "H2", ecc Anche se questo funziona tecnicamente, sto vedendo un messaggio di avviso nella console:

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. 

bisogno di qualche direzione per aiutare a interpretare questo avviso e non riesco a trovare una buona documentazione su come fare qualcosa di simile.

Answer 1

Super semplice risposta a questa (+1 per Reagire 0,12 preparazione le cose più semplici!), Ma tutto ciò che doveva essere fatto è rimuovere la parte React.DOM [] della definizione delle variabili, passando la stringa letterale:

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

     var Tag = this.props.element; 

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

Funziona magnificamente; senza alcun avviso di console!