[解決済み] タグエラーです。React JSX スタイルタグのレンダリング時のエラーについて

質問

これは私のリアクトレンダー関数です。

render:function(){
  return (
    <div>
      <p className="rr">something</p>
      <style>
        .rr{
          color:red;
        }
      </style>
    </div>    
  )
}

この場合、次のようなエラーが発生します。

"JSX:エラー。パースエラーです。22行目：予期しないトークン:"。

ここで何が問題なのでしょうか？ リアクトコンポーネントに通常のcssを完全に埋め込むことはできますか？

解決方法は？

JSXは、javascriptの小さな拡張に過ぎず、それ自身の完全なテンプレート言語ではありません。だから、javascriptと同じようにやることになる。

return (
  <div>
    <p className="rr">something</p>

      <style>{"\
        .rr{\
          color:red;\
        }\
      "}</style>
  </div>
)

http://jsfiddle.net/r6rqz068/

しかし、こんなことをする正当な理由はまったくありません。