后續(xù)待完善
import React from 'react';
import PropTypes from 'prop-types';
class Tab extends React.Component{
static defaultProps ={
defultCurrent:'0'
}
static propTypes = {
defultCurrent : PropTypes.string.isRequired
}
constructor(props){
super(props);
this.state={
currentIndex:this.props.defultCurrent
}
}
select= select => this.setState({ currentIndex:select })
render(){
const {currentIndex} = this.state;
return(
<div>
<span>你選擇的是{currentIndex}</span>
{
React.Children.map(this.props.children,(ele,index)=>
<div onClick={this.select.bind(this,index)}>{ele.props.name}</div>)
}
<div>
{
React.Children.map(this.props.children,(ele,index)=>currentIndex==index&&ele)
}
</div>
</div>
)
}
}
class App extends React.Component{
render(){
return(
<div>
<Tab defultCurrent='0'>
<div name='0'>
<div><span>我是第一個</span><span>1</span></div>
</div>
<div name="1">
<div><span>我是第二個</span><span>2</span></div>
</div>
<div name="2">
<div><span>我是第三個</span><span>3</span></div>
</div>
</Tab>
</div>
)
}
}
module.exports = App
