4

我正在尝试使用 Reach JSX 做一些对 JQuery 来说很简单的事情，但我无法在 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

1

您说过要选择第一个选项卡并为其分配一个类名。我认为它的解决方案相当琐碎并且与此类似（我没有测试它）：

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

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

但是看看你的用例，即你正在尝试实现一个选项卡元素，我认为你应该实现一个Tabs可以管理所选选项卡当前状态的组件。这是一个您可以开始的示例：

http://jsfiddle.net/kb3gN/7180/

var TabHeader = React.createClass({
    render: function() {
        return (
          <li className={"tabHeader " + this.props.className} 
                onClick={this.props.onClick}>
              {this.props.header}
          </li>
      );
    }
});

var TabContent = React.createClass({
    render: function() {
        return (
          <div className={"tabContent " + this.props.className}> 
              {this.props.content}
          </div>
      );
    }
});

var Tabs = React.createClass({

    getInitialState: function(){
        return {
            selectedTabNo : this.props.initialSelected ? this.props.initialSelected : 0
        }
    },

    getHeaderClass : function(i){
        return this.state.selectedTabNo == i ? "selected" : "";
    },

    getContentClass : function(i){
        return this.state.selectedTabNo == i ? "selected" : "hidden";
    },

    handleClick: function(i,e){
        this.setState({selectedTabNo:i});
        e.preventDefault();
    },

    render: function() {

      var headers = [];
      var i = 0;

      this.props.tabs.forEach(function(tab){
          headers.push(<TabHeader header={ tab.header } 
                             key={"tab"+i}
                             onClick = {this.handleClick.bind(this,i)}
                             className = {this.getHeaderClass(i)} />);
          i++;
      }.bind(this));

      var contents = [];
      i=0;
      this.props.tabs.forEach(function(tab){
          contents.push(<TabContent content={ tab.content } 
                                    key={"content"+i}
                                    className = {this.getContentClass(i)} />);
          i++;
      }.bind(this));


      return (
          <div className="tabsContainer">
              <ul className="tabHeadings">
                {headers}
              </ul>
              {contents}
          </div>    
      );
    }
});

var App = React.createClass({
    render: function() {
        return( <Tabs initialSelected={2} 
                      tabs={[{header:"step1", content:<div>This is page 1</div>},
                             {header:"step2", content:<div>This is page 2</div>},
                             {header:"step3", content:<div>This is page 3</div>} ]} /> );
   }
});

React.render(<App />, document.body);
于 2014-11-02T19:52:34.390 回答