基于React的Tab组件

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

基于React的Tab组件的相关文章

使用react context实现一个支持组件组合和嵌套的React Tab组件

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds

基于React Native的Material Design风格的组件库 MRN

基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://github.com/binggg/mrn 示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w 示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/androi

几款简单的 React Native UI 组件

本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理控件 tcomb-form-native tcomb-form-native 是 React Native 强大的表单处

聊聊React高阶组件(Higher-Order Components)

使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低的东西如今可不多见了啊,是个不可多得的 zhuangbility的利器,自然不可轻易错过,遂深入了解了一番. 概述 高阶组件的定义 React 官网上对高阶组件的定义: 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,

react做tab切换的几种方式

最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到.当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq.不过不得不吐槽一下,在jquery很简单的东西,在react中稍微复杂化了一点. 目前我用到的tab切换只有两种方式,所以暂时总结这两种,以后有遇到其他的再总结. 第一种.只是子

React-Native(三):React Native是基于React设计的

React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 这个项目

前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化

前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Download 2.node下载 下载地址:https://nodejs.org/en/ V8.9.1版本下载 3.cnpm安装 在安装完node后,npm默认就安装了,因为某种原因,npm下载组件包的速度太慢了,所以需要安装cnpm 安装命令 npm install -g cnpm --regist

自定义react数据验证组件

我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

放弃antd table,基于React手写一个虚拟滚动的表格

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,