基于React的Tab组件
Tabs
renderHeader = () => {
return React.Children.map( this.props.children , (element,index) => {
const activeStyle = element.key === this.state.activeKey ? "activeTitle" : null;
return (
<span
onClick={() => {
this.setState({
activeKey: element.key
})
}}
className={classnames("title", activeStyle)}
>
{element.props.title}
</span>
)
})
}
renderContent = () => {
return React.Children.map( this.props.children , (element,index) => {
if (element.key === this.state.activeKey) {
return (<div>{element.props.children}</div>)
}
})
}
render() {
return (
<div className="container">
<div className="titleContainer">{this.renderHeader()}</div>
<div className="contentContainer">{this.renderContent()}</div>
</div>
)
}
TabPane
render() {
return (
<div>
<div>{this.props.title}</div>
<div>{this.props.children}</div>
</div>
)
}
调用
render() {
return (
<div>
<Tabs activeKey="1">
<TabPane title="title1" key="1">content1</TabPane>
<TabPane title="title2" key="2">content2</TabPane>
</Tabs>
</div>
)
}
原文地址:https://www.cnblogs.com/simply-yu/p/9425112.html
时间: 2024-10-12 11:40:51