javascript - principiantes - Compresión dinámica de un componente React

react para principiantes

Question

En React JSX no parece posible hacer algo como esto:

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

Obtengo un error de análisis: Token inesperado {. ¿No es esto algo que React puede manejar?

Estoy diseñando este componente para que, bajo el capó, los valores almacenados en this.props.component.slug contengan elementos HTML válidos (h1, p, etc.). ¿Hay alguna manera de hacer funcionar esto?

Answer 1

Como nilgun previamente señaló, el componente de babosas no debe ser envuelto con llaves.

Si decide almacenarlo en una variable, asegúrese de que comience con una letra mayúscula.

Aquí hay un ejemplo:

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''));

Aquí hay un violín que funciona: https://jsfiddle.net/janklimo/yc3qcd0u/

Answer 2

No debe poner componente slug en llaves:

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);

Aquí hay un violín que funciona: http://jsfiddle.net/kb3gN/6668/

Además, puede encontrar al compilador JSX útil para depurar este tipo de errores: http://facebook.github.io/react/jsx-compiler.html

Answer 3

Si su intención es inyectar el componente real procesado, puede hacer algo como esto, que es muy conveniente para las pruebas, o cualquier otra razón por la que le gustaría inyectar dinámicamente componentes para representar.

var MyComponentF=function(ChildComponent){
var MyComponent = React.createClass({
getInitialState: function () {
return {
};
},
componentDidMount: function () {
},
render: function () {
return (
<div className="MyComponent">
<ChildComponent></ChildComponent>
</div>
);
}
});
return MyComponent;
};
var OtherComponentF=function(){
var OtherComponent = React.createClass({
getInitialState: function () {
return {
};
},
componentDidMount: function () {
},
render: function () {
return (
<div className="OtherComponent">
OtherComponent
</div>
);
}
});
return OtherComponent;
};
var AnotherComponentF=function(){
var AnotherComponent = React.createClass({
getInitialState: function () {
return {
};
},
componentDidMount: function () {
},
render: function () {
return (
<div className="AnotherComponent">
AnotherComponent
</div>
);
}
});
return AnotherComponent;
};
$(document).ready(function () {
var appComponent = MyComponentF(OtherComponentF());
// OR
var appComponent = MyComponentF(AnotherComponentF());
// Results will differ depending on injected component.
ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container"));
});

Answer 4

Editar : ¿Tal vez olvidó agregar /** @jsx React.DOM */ al comienzo de js?

Puedes usar React.DOM aunque:

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

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

No soy un experto en React, pero creo que todos los componentes deberían construirse con una etiqueta específica al principio. Por lo tanto, podría presentar un propósito claro en sí mismo.