Reflexion tagName passieren als String Requisiten

Question

class Button extends React.Component{ 
    renderAnchor(){ 
     return <a onClick={this.props.onClick}>{this.props.children}</a> 
    } 
    renderButton(){ 
     return <button onClick={this.props.onClick}>{this.props.children}</button> 
    } 
    render(){ 
     return (this.tagName==='a')?this.renderAnchor():this.renderButton(); 
    } 

} 

zu erbringenden Ich habe die oben reagieren Komponenten, ich möchte Code Redundanz vermeiden, so entscheide ich alle Methoden mit Ausnahme der letzten machen zu entfernen (render) durch den Tag-Namen zu ersetzen durch this.props.tagName

 render(){ 
     return <{this.props.tagName} onClick={this.props.onClick}>{this.props.children}</{this.props.tagName}> 
    } 

wirft jedoch ein Fehler der Syntax.

Wie kann Reflexion von Tagname in reagieren/ES7/Babel?

Answer 1

Sie können den Variablennamen einer Variablen zuweisen und diese Variable als HTML-Tag verwenden.

Zum Beispiel:

render(){ 
    const CustomTag = this.props.tagName //assign it to the variable 

    return <CustomTag 
     onClick={this.props.onClick}> 
      {this.props.children} 
     </CustomTag> 

Demo: https://jsfiddle.net/88honb0z/