基于React的Tab组件

最新推荐文章于 2024-08-22 09:19:21 发布

weixin_34378045

最新推荐文章于 2024-08-22 09:19:21 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/simply-yu/p/9425112.html

本文介绍了一个基于 React 实现的 Tabs 组件，该组件通过 TabPane 子组件展示不同的面板内容，并通过点击标题来切换显示的面板。文章提供了完整的代码示例，包括如何渲染标题和内容，以及如何设置激活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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