Dynamisch ein Reagieren Komponente

Question

In Reaktion JSX es scheint nicht möglich zu sein, um so etwas zu tun:

render: function() { 
 
    return (
 
    <{this.props.component.slug} className='text'> 
 
    {this.props.component.value} 
 
    </{this.props.component.slug}> 
 
); 
 
}

Ich erhalte einen Parser-Fehler: unerwartete Token {. Ist das nicht etwas, mit dem React umgehen kann?

Ich entwerfe diese Komponente so, dass unter der Haube die in this.props.component.slug gespeicherten Werte gültige HTML-Elemente (h1, p, etc.) enthalten. Gibt es eine Möglichkeit, dies zum Funktionieren zu bringen?

Answer 1

Sie nicht Bestandteil Slug in geschweiften Klammern setzen sollte:

var Hello = React.createClass({ 
    render: function() { 
     return <this.props.component.slug className='text'> 
      {this.props.component.value} 
     </this.props.component.slug>; 
    } 
}); 

React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body); 

Hier ist eine Arbeits Geige: http://jsfiddle.net/kb3gN/6668/

Außerdem können Sie JSX Compiler nützlich für das Debuggen, diese Art von Fehlern: http://facebook.github.io/react/jsx-compiler.html

Answer 2

Bearbeiten: Vielleicht haben Sie vergessen, /** @jsx React.DOM */ am Anfang von js hinzuzufügen?

können Sie React.DOM obwohl verwenden:

render: function() { 
    return React.DOM[this.props.component.slug](null, this.props.component.value); 
} 

http://jsbin.com/rerehutena/2/edit?html,js,output

Ich bin kein Experte Reaktion, aber ich denke, sollte jede Komponente mit einem bestimmten Tag zu Beginn konstruieren werden. Es könnte also einen klaren Zweck darstellen.

Answer 3

Wie zuvor noch nicht erwähnt, sollte der Komponenten-Slug nicht in geschweifte Klammern gewickelt werden.

Wenn Sie sich entscheiden, es in einer Variablen zu speichern, stellen Sie sicher, dass es mit einem Großbuchstaben beginnt. Hier

ein Beispiel:

var Home = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h3>This is an input</h3> 
     <CustomComponent inputType="input" /> 
     <h3>This is a text area</h3> 
     <CustomComponent inputType="textarea" /> 
     </div> 
    ); 
    } 
}); 

var CustomComponent = React.createClass({ 
    render: function() { 
    // make sure this var starts with a capital letter 
    var InputType = this.props.inputType; 
    return <InputType />; 
    } 
}); 

React.render(<Home />, document.getElementById('container')); 

Hier ist eine Arbeits Geige: https://jsfiddle.net/janklimo/yc3qcd0u/

Answer 4

Wenn Ihre Absicht ist es, die tatsächliche Komponente gerendert zu injizieren, können Sie etwas tun, das für den Test ist sehr praktisch Aus welchem ​​Grund auch immer möchten Sie Komponenten zum Rendern dynamisch einfügen.