Reactコンポーネントを動的にレンダリングする

質問

React JSXでは、このようなことはできないようです。

render: function() {
  return (
    <{this.props.component.slug} className='text'>
      {this.props.component.value}
    </{this.props.component.slug}>
  );
}

パースエラーが発生します。Unexpected token {. これはReact が処理できるものではないのでしょうか？

私はこのコンポーネントを設計しています。 this.props.component.slug に格納された値が有効な HTML 要素 (h1, p, など) を含むように、このコンポーネントを設計しています。 これを動作させる方法はありますか？

どのように解決するのですか？

コンポーネントのスラッグを中括弧で囲んではいけません。

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 Compilerが役に立ちます。 http://facebook.github.io/react/jsx-compiler.html