javascript – 动态渲染React组件

在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

相关文章
相关标签/搜索