在呈現過程中，Tab2如何知道它是否是當前選定的選項卡？

Question

在呈現期間，Tab2如何知道它是否是當前選定的選項卡？

我想這樣做來更改標籤標題的內容或風格（例如，所選標籤的標題是斜體）。

我不想使用onChange並管理Tab2狀態，因爲Tab2已經知道它自己的狀態。

<Tabs2 id="TabPane"> 
    <Tab2 
     id="TabFirst" 
     panel={SomePanel} 
    > 
     <Text> 
     { isCurrentTabId("TabFirst") 
      ? "I am selected!" 
      : "I'm not selected"} 
    </Text> 
    </Tab2> 
    <Tab2 id="TabSecond"/> 
    </Tabs2> 


const isCurrentTabId = (tabId) => { ??? }; 

什麼代碼去哪裏「???」是什麼？

謝謝！

Answer 1

我認爲你需要重新考慮你的方法。
父組件應該知道選擇了哪個選項卡，而不是選項卡本身。

比方說，標籤本身會知道它是否通過onClick事件或任何其他方法選擇，那麼，你可以像你想要的那樣渲染樣式。
現在，當我點擊Tab5時發生了什麼？它會知道它是選定的選項卡，但第一個選項卡呢？誰會通知它它沒有被選中？

我認爲它是所有Tabs責任的父母，負責管理所選Tab是誰，並且父母可以爲每個標籤傳遞一個道具，例如isSelected用於通知它是否被選中。

一個小例子：

const tabs = [1, 2, 3, 4, 5]; 
 

 

 
class Tab extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.onClick = this.onClick.bind(this); 
 
    } 
 

 

 
    onClick() { 
 
    const { id, onClick } = this.props; 
 
    onClick(id); 
 
    } 
 

 
    render() { 
 
    const { id, isSelected } = this.props; 
 
    const css = `tab ${isSelected && 'selected'}`; 
 
    return (
 
     <div 
 
     className={css} 
 
     onClick={this.onClick} 
 
     > 
 
     Tab - {id} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     selectedTab: 1 
 
    } 
 

 
    this.onTabChange = this.onTabChange.bind(this); 
 
    } 
 

 
    onTabChange(id) { 
 
    this.setState({ selectedTab: id }); 
 
    } 
 

 
    render() { 
 
    const { selectedTab } = this.state; 
 
    return (
 
     <div> 
 
     { 
 
      tabs.map((t, i) => <Tab id={i + 1} isSelected={selectedTab === i + 1} onClick={this.onTabChange} />) 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

.tab{ 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
    width: 60px 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.selected{ 
 
    border: 1px solid #eee; 
 
    box-shadow: 0 0 3px 1px #999; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>