☰

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

tag-icon • tag-icon javascript reactjs
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 など) が含まれるようにしています。これを機能させる方法はありますか?

ベストアンサー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 コンパイラは次のようなエラーのデバッグに役立ちます。jsx コンパイラ

おすすめ記事