React Tab
react에서 bootstrap의 탭을 이용하면 손쉽게 탭을 구현할 수 있다.
import {Tabs,Tab} from 'react-bootstrap'
activeKey를 이용한 데이터 넘기기
state를 활용하면 다음과 같이 ajax_data : json의 형태의 데이터에서 원하는 state에 해당하는 key에 대해 데이터를 넘겨줄 수 있다.
<Tabs activeKey={this.state.key}
onSelect={key => this.setState({ key })} id="uncontrolled-tab-example">
<Tab eventKey="home" title="Home">
<Sonnet text={ajax_data[this.state.key]}/>
</Tab>
<Tab eventKey="profile" title="Profile">
<Sonnet text={ajax_data[this.state.key]}/>
</Tab>
<Tab eventKey="contact" title="Contact">
<Sonnet text={ajax_data[this.state.key]}/>
</Tab>
</Tabs>
그러면, 위와 같이 사용하지 못 하는 3rd party 컴퍼넌트는??
간단하다. 재정의하면 된다.
넘겨줄 수 있는 형태의 메소드를 구현한 뒤에 insert 하면 된다.
class RedefinedComponent extends React.Component{
}