nav.jsx如下:
import React from 'react';
import "./css/nav.css"
class TabsControl extends React.Component {
constructor() {
super()
this.state = {
currentIndex: 0
}
}
check_title_index(index) {
return index === this.state.currentIndex ? "tab_title active" : "tab_title"
}
check_item_index(index) {
return index === this.state.currentIndex ? "tab_item show" : "tab_item"
}
render() {
let _this = this
return (
<div>
<div className="tab_title_warp">
{
React.Children.map(this.props.children, (element, index) => { //React.Children.map 会遍历任何类型的this.props.children
return (
<div onClick={() => {
this.setState({
currentIndex: index
})
}}
className={this.check_title_index(index)}>
{element.props.name}
</div>
)
})
}
</div>
<div className="tab_item_wrap">{
React.Children.map(this.props.children,(element,index) => {
return(
<div className = {this.check_item_index(index)}>
{element}
</div>
)
})
}
</div>
</div>
)
}
}
export default TabsControl;
index.js
import TabsControl from './nav'
class TabComponent extends React.Component{
render( ){
return(
<div className="container">
<TabsControl>
<div name = "first">
第一帧
</div>
<div name = "second">
第二帧
</div>
<div name = "third">
第三帧
</div>
</TabsControl>
</div>
)
}
}
ReactDOM.render(<TabComponent/>, document.getElementById('root'));
React我刚开始学习,这个例子是参考学习别人的:原文地址http://www.cnblogs.com/tianheila/p/5170330.html