React JSX和FirstSibling或FirstChild

我正在嘗試使用Reach JSX做些與JQuery直接相關的工作，但我無法在JSX中找到它。我已儘可能簡化了示例，問題歸結爲：React JSX和FirstSibling或FirstChild

我正在渲染多個標籤頁標題，並且我希望第一個標籤頁使用特定的類名進行渲染，以便我可以設計它看起來不同（默認選擇的選項卡）。

我的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> 
    ); 
    } 
});

我想提出一個類名的第一個表，如「選擇」或「激活」，但我無法弄清楚如何去做。

任何人都可以幫忙嗎？

來源

2014-10-31 Brighty

你說你想選擇第一個選項卡併爲其分配一個className。我認爲，解決的辦法是相當微不足道，類似這樣的（我沒有測試）：

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-02 19:52:34 nilgun

非常感謝您的回覆。我取得了良好的初步進展，但後來撞牆了。我的數據將包含一個標籤列表和一個標籤內容列表。我需要將活動標籤分享給內容，以便我可以顯示正確的內容。我試圖在頂級組件級別使用狀態，但我無法弄清楚如何使用{this.props.children}語法傳遞值。我有一個JsFiddle的例子http://jsfiddle.net/tk5nb8hw/4/ 任何人都可以幫忙嗎？ – Brighty 2014-11-03 17:03:43

我創建了另一個演示我的問題的例子。 http://jsfiddle.net/b2h1kquy/1/ 標籤標題使用的selectedTab與標籤內容使用的tabHeading不同。我試圖改變它使用包含控制的狀態元素，但努力將值傳遞給子控件。誰能幫忙？ – Brighty 2014-11-03 17:27:16

我更新了我的答案以包含標籤內容。 – nilgun 2014-11-04 12:26:49

React JSX和FirstSibling或FirstChild

回答

相關問題