Tab2가 현재 선택된 탭인지 어떻게 알 수 있습니까?

Question

Tab2가 현재 선택된 탭인지 어떻게 알 수 있습니까?

탭 제목의 내용이나 스타일을 변경하려면이 작업을 수행하고 싶습니다 (예 : 선택한 탭의 제목을 기울임 꼴로 표시).

나는 이미 Tab2가 이 자신의 상태 인을 알고 있으므로 onChange를 사용하고 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을 클릭하면 어떻게됩니까? 선택한 탭인지는 알지만 첫 번째 탭은 무엇입니까? 누가 더 이상 선택하지 않았 음을 통보하겠습니까?

나는 누가 선택한 탭인지를 관리하는 모든 탭 책임의 부모라고 생각하며, 부모는 각 탭에 대한 보조 도구를 전달할 수 있습니다 (예 : 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>