用React实现点击切换的标签页

xushaojieaaa 发布于2019-08-22 10:59 / 1790人阅读

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页

一、首先是Showcase

See the Pen react-tabs by Wang Chao (@charleyw) on CodePen.

二、如何实现

既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。

这个TabsControl作为父组件，它来控制Tab的如何切换，Tab是用来包裹真正要显示的内容的，它的name属性是这个标签页的名字，会被显示在标签页的标题栏上。

三、创建基本元素

按照之前的想法，我们用Tab定义了很多个标签页，我们需要根据这些定义生成标签页的标题栏和内容。

1. 遍历this.props.children动态生成标题栏

this.props.children是React内建的一个属性，用来获取组件的子元素。因为子元素有可能是Object或者Array，所以React提供了一些处理children的辅助方法用来遍历：React.Children.map

那么动态生成标题的代码可能是这样子的：

React.Children.map(this.props.children, (element, index) => {
    return ({element.props.name}
)

2. 再用同样方法生成标签页内容

React.Children.map(this.props.children, element => {
    return (element)
})

组合起来就是TabsControl的实现：

let TabsControl = React.createClass({
  render: function () {
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      
        
          {React.Children.map(this.props.children, (element, index) => {
            return ({element.props.name})
          })}
        
        
          {React.Children.map(this.props.children, element => {
            return (element)
          })}
        
      
    )
  }
});

加上一些css就能看到一个标签页的雏形了。

三、实现标签页切换

这里要出现React最重要的概念了state，state是一个Javascript的Object，它是用来表示组件的当前状态的，如果用TabsControl举例的话，它的state可以是当前处于激活状态的标签页编号（当然，如果你想的话也可以保存标签页的内容）。
React提供了一个方法setState()让你可以改变state的值。每次调用setState()都会触发组件的render()，也就是说会把组件所代表的DOM更新到state所代表的状态。

所以实现切换的关键如下：

state保存当前处于激活状态的标签页的编号

点击标题的时候调用setState()更新激活的标签页编号

render()的时候，在遍历this.props.children的时候把编号与state中编号一致的元素标记为active

用css将非active的元素隐藏起来

所以代码是这样的：

let TabsControl = React.createClass({
  getInitialState: function(){
    return {currentIndex: 0}
  },
  
  getTitleItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-title-item active" : "tab-title-item";
  },
  
  getContentItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-content-item active" : "tab-content-item";
  },
  
  render: function(){
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      
        
          {React.Children.map(this.props.children, (element, index) => {
            return ( {this.setState({currentIndex: index})}} className={that.getTitleItemCssClasses(index)}>{element.props.name})
          })}
        
        
          {React.Children.map(this.props.children, (element, index) => {
            return ({element})
          })}  
        
      
    )
  }
});

getInitialState：是组件的初始化状态，默认是第一个标签页处于激活状态。
getTitleItemCssClasses：判断当前标签和state中保存的标签编号是否一直，是则标识为active。
getContentItemCssClasses：同上。
onClick={() => {this.setState({currentIndex: index})}}：标签页标题绑定了点击事件，每次点击都会更新state保存的标签页编号，然后触发render()方法重绘标签页。

四、总结

上面一系列的操作最终的结果都需要用render()来反应出来，所以关键点是如何在render()中使用state来动态生成DOM.

接下来的改进

实现可以滑动的标签页

GPU云服务器云服务器标签页切换 jquery标签页切换 js实现添加标签页用c语言实现多表密码[标签:标题]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91584.html

用React实现点击切换的标签页

摘要：四总结上面一系列的操作最终的结果都需要用来反应出来，所以关键点是如何在中使用来动态生成接下来的改进实现可以滑动的标签页一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。 ...

codeKK 2019-08-01 15:00 评论0 收藏0
手把手教你用React实现一个简单的个人博客

摘要：官方文档中文文档基本使用注意一定要在根目录的中声明，要不然点击任何链接都无法跳转。官方文档中文文档简单的来说，每一次的修改状态都需要触发，然而其实项目中我现在还没用到修改数据。。。学习 React 的过程中实现了一个个人主页，没有复杂的实现和操作，适合入门 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 这个项目其实功能...

zhaochunqi 2019-08-21 16:49 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

U2FsdGVkX1x 2019-08-23 17:10 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

tolerious 2019-08-29 18:44 评论0 收藏0