レンダリング中に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イベントを介して選択したかどうか、または他の方法でOKを選択したかどうかをタブ自体が知ることができます。
Tab5をクリックするとどうなりますか？選択されたタブであることがわかりますが、最初のタブはどうですか？それはもはや選択されていないことを誰に通知するのだろうか？

私はそれが選択されたタブであることを管理するすべてのタブの責任の親だと思うし、親が各タブの小道を伝えることができます。例えば、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>