小编典典

动态渲染React组件

reactjs

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


阅读 252

收藏
2020-07-22

共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

2020-07-22