在 React JSX 中，似乎不可能做这样的事情：
render: function() {
return (
<{this.props.component.slug} className='text'>
{this.props.component.value}
</{this.props.component.slug}>
);
}我收到一个解析错误：意外的令牌 {。这不是 React 可以处理的吗？
我正在设计这个组件，以便在引擎盖下，存储在其中的值this.props.component.slug将包含有效的 HTML 元素（h1、p 等）。有什么办法可以使这项工作？
您不应该将组件 slug 放在花括号中：
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);
这是一个工作小提琴：http : //jsfiddle.net/kb3gN/6668/
此外，您可以找到有助于调试此类错误的 JSX 编译器：http : //facebook.github.io/react/jsx-compiler.html
正如 nilgun 之前指出的那样，组件 slug 不应包裹在花括号中。
如果您决定将其存储在变量中，请确保它以大写字母开头。
下面是一个例子：
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'));
这是一个工作小提琴：https : //jsfiddle.net/janklimo/yc3qcd0u/
如果你的意图是注入实际渲染的组件，你可以做这样的事情，这对于测试非常方便，或者你想动态注入组件来渲染。
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"));
});
编辑：也许你忘记/** @jsx React.DOM */在js开头添加？
你可以使用React.DOM：
render: function() {
return React.DOM[this.props.component.slug](null, this.props.component.value);
}
http://jsbin.com/rerehutena/2/edit?html,js,output
我不是 React 专家，但我认为每个组件都应该在开始时使用特定的标签构建。所以它本身可以呈现一个明确的目的。
我的解决方案是将导入的组件分配给一个变量（使用大写字母），然后呈现该变量。
例子：
import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';
class MyComponent extends Component {
components = {
foo: FooComponent,
bar: BarComponent
};
//this is the most important step
const TagName = this.components.foo;
render() {
return <TagName />
}
}
export default MyComponent;