动态渲染React组件

Question

在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等）。有什么办法可以使这项工作吗？

Answer 1

您不应该将组件子弹放在花括号中：

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