4

JQueryで簡単にできることをReach JSXでやろうとしていますが、JSXではわかりません。例を可能な限り単純化したところ、問題は次のようになりました。

私は多くのタブヘッダーをレンダリングしています.最初のタブを特定のクラス名でレンダリングして、スタイルを変えて別の外観にすることができます(デフォルトで選択されたタブ)。

私のHtmlは次のようになります：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tabs</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="content"></div>

        <script type="text/jsx" src="tabs.js"></script>

        <script type="text/jsx">
            /**
            * @jsx React.DOM
            */

            React.renderComponent(<Tabs><Tab title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>,  document.getElementById('content'));
       </script>
   </body>
</html>

私のJSXは次のようになります：

/**
  * @jsx React.DOM
 */

var Tab = React.createClass({
    render: function() {
        return (
          <li className="tab">
                {this.props.title}
          </li>
      );
    }
});

var Tabs = React.createClass({
    render: function() {
        return (
          <ul className="tabs">
                {this.props.children}
          </ul>
      );
    }
});

「selected」や「active」など、最初のテーブルにクラス名を付けたいのですが、その方法がわかりません。

誰でも助けてもらえますか？

4

1 に答える 1