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