2组选项卡 react_react选项卡 - CSDN
  • react实现选项卡

    2018-10-31 15:06:09
    既然用React写,那么它就必然是一个组件,首先考虑你怎么使用这个组件,也就是这个组件的接口是怎么样的。 <TabsControl> <Tab name="red"> <div className="...

    一、首先是Showcase

    效果  传送门

    二、如何实现

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

    <TabsControl>
      <Tab name="red">
        <div className="red"/>
      </Tab>
      <Tab name="blue">
        <div className="blue"/>
      </Tab>
      <Tab name="yellow">
        <div className="yellow"/>
      </Tab>
    </TabsControl>

    这个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 (<div className="tab-title-item">{element.props.name}</div>)

    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 (
          <div>
            <nav className="tab-title-items">
              {React.Children.map(this.props.children, (element, index) => {
                return (<div className="tab-title-item">{element.props.name}</div>)
              })}
            </nav>
            <div className="tab-content-items">
              {React.Children.map(this.props.children, element => {
                return (element)
              })}
            </div>
          </div>
        )
      }
    });

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

    三、实现标签页切换

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

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

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

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

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

    4. 用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 (
          <div>
            <nav className="tab-title-items">
              {React.Children.map(this.props.children, (element, index) => {
                return (<div onClick={() => {this.setState({currentIndex: index})}} className={that.getTitleItemCssClasses(index)}>{element.props.name}</div>)
              })}
            </nav>
            <div className="tab-content-items">
              {React.Children.map(this.props.children, (element, index) => {
                return (<div className={that.getContentItemCssClasses(index)}>{element}</div>)
              })}  
            </div>
          </div>
        )
      }
    });

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

    四、总结

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

    接下来的改进

    实现可以滑动的标签页

    原文网址:https://segmentfault.com/a/1190000004200481

    展开全文
  • reactNative的选项卡

    2017-05-04 22:31:33
    reactNative的选项卡

    reactNative的水平切换菜单


           实现效果:

          

           准备工作:

           npm install react-native-scrollable-tab-view


           props介绍:

         

    • tabBarUnderlineStyle(style)
      设置DefaultTabBarScrollableTabBarTab选中时下方横线的颜色
    • tabBarBackgroundColor(String)
      设置整个Tab这一栏的背景颜色
    • tabBarActiveTextColor(String)
      设置选中Tab的文字颜色
    • tabBarInactiveTextColor(String)
      设置未选中Tab的文字颜色
    • tabBarTextStyle(Object)
      设置Tab文字的样式,比如字号、字体等


            实现代码:

          

    <ScrollableTabView
                    tabBarBackgroundColor="#63B8FF"
                    tabBarActiveTextColor="#FFF"
                    tabBarInactiveTextColor="#F5FFFA"
                    tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
                    {
                        this.state.languages.map((item,i)=>{
                            return (item.checked) ? <PopularTab {...this.props} key={`tab${i}`} tabLabel={item.name}/> : null;
                        })
                    }
    </ScrollableTabView>

    注意:每个被包含的子视图需要使用tabLabel属性,表示对应Tab显示的文字

         参考博客:http://www.jianshu.com/p/b7788c3d106e

    展开全文
  • react tab选项卡切换

    2019-10-02 11:19:12
    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy。但是用react去实现就没那么容易了(是自己react比较菜)。由于最近在重新学习react就试着写了一个tab切换的小列子。...

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy。但是用react去实现就没那么容易了(是自己react比较菜)。由于最近在重新学习react就试着写了一个tab切换的小列子。还有多可优化的地方希望能抛砖引玉(简单写了点注释)。

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
        <div id="app" ></div>
        <script src="./dist/js/bundle.js" ></script>
    </body>
    </html>

    js代码

    import React,{Component} from 'react';
    import {render} from 'react-dom';
    
    
    class Tab extends Component{
      constructor(){
        super()
        this.state = {
          list:['导航一','导航二','导航三'],
          content:[
            {item:'内容一'},
            {item:'内容二'},
            {item:'内容三'}
          ],
          current:0
        }
      }
      handleClick(index){
        this.setState({ current:index });
      }
    
      currentClass(index){
    
        return this.state.current === index ? 'current' : '';
      }
      contentClass(index){
        return this.state.current === index ? 'active' : '';
      }
    
      render(){
        return(
          <div id="outer" >
            <ul id="tab" >
                //通过props的形式传递数据和方法给子组件
                //::this es7的语法详见https://github.com/tc39/proposal-bind-operator
                { this.state.list.map( (val,index ) => {
                  return (<List currentClass={::this.currentClass} handleClick={::this.handleClick} val={val} key={index} index={index} /> )
               }) }
            </ul>
            <div id="content" >
            { this.state.content.map( ( val,index ) => {
                      return ( <Content key={index} val={val.item} index={index}  contentClass={::this.contentClass } /> )
            })}
            </div>
          </div>
        )
      }
    
    }
    
    class List extends Component{
    
        handleClick(){
            //调用父组件的方法 将逻辑处理交给父组件
           this.props.handleClick(this.props.index);
        }
        render(){
          return(
              <li className={this.props.currentClass(this.props.index)} onClick={::this.handleClick} >{this.props.val}</li>
          )
        }
    }
    class Content extends Component{
    
        render(){
            return(
                <div className={this.props.contentClass(this.props.index)} >{ this.props.val  }</div>
            )
        }
    }
    render( <Tab/>,document.querySelector("#app") );
    
    

    CSS代码(sass)

    body,ul,li{ margin:0;padding:0; }
    body{ font:12px/1.5 Tahoma; }
    
    #outer{
      width:450px;
      margin:10px auto;
      #tab{
        overflow:hidden;
        background:#000;
        border:1px solid #000;
        li { float:left;color:#fff;height:30px;
          cursor:pointer;line-height:30px;
          list-style:none;padding:0 20px;
    
         }
         .current{ color:#000;background:#ccc; }
      }
      #content{ border:1px solid #000; border-top-width:0;
        height:300px;
        >div{ display:none;  }
        .active{ display:block }
       }
    
      
    }
    

    完整例子可以移动到我的github上 react-tab

    转载于:https://www.cnblogs.com/cqsjs/p/5883079.html

    展开全文
  • React Native的跨平台选项卡视图组件
  • 使用了 es6语法 ,可以自定义切换事件(click和mouseover),是否自动切换,选项卡初始位置,切换效果 (淡入淡出)。 项目地址 https://github.com/smartTop/react-tab,项目实现的效果

    使用了 es6语法 ,可以自定义切换事件(click和mouseover),是否自动切换,选项卡初始位置,切换效果 (淡入淡出)。

    项目地址 https://github.com/smartTop/react-tab,希望多交流


    展开全文
  • 官方为我们提供的Tab控制器有两种: TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab) ...如果我们需要一个更通用的Tab控制器...react-native-sc
  • 157-react选项卡

    2018-12-18 21:46:29
    react选项卡 &lt;script src="js/react.development.js"&gt;&lt;/script&gt; &lt;script src="js/react-dom.development.js"&gt;&lt;/script&gt; &lt;...
  • react中tab选项卡切换

    2019-04-03 11:43:52
    import React from 'react'; import { NavLink } from "react-router-dom"; import Otherbanner from '../otherbanner/index.js'; import Header from '../../header/index.js'; import Footer...
  • react的特点: 1.声明式设计−React采用声明范式,可以轻松描述应用。 2.高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活−React可以与已知的库或框架很好地配合。 4.JSX− JSX ...
  • 在上一篇文章当中,我们学习了react-native-scrollable-tab-view的基本使用方式,包括基本Props的使用介绍等。我们知道官方为我们提供了两种基本的Tab控制器样式,DefaultTabBar和ScrollableTabBar。很多情况下,...
  • 今天在开发过程中,遇到一个问题,有时候我们想要NavLink的active效果,但是并不想做路由跳转,这时候就需要我们自己写功能了,如图所示: 首先,通过绑定事件,并传递一个唯一的参数,然后在className通过三目运算符...
  • react+antd 选项卡切换

    2019-07-30 23:30:15
    import React from 'react'; import ReactDOM from 'react-dom'; import CardSecond from './CardSecond'; import './index.css'; ReactDOM.render( <div> <CardSecond /> ...
  • react-native-tab-view, 用于响应本机的跨平台选项卡视图组件 本地选项卡视图 用于响应本机的跨平台选项卡视图组件。这是swipeable选项卡视图的一个javascript实现。 它是超级定制的,允许你做像coverflow这样的事情...
  • react antd 选项卡切换

    2019-10-06 13:38:17
    index.js: import React from 'react'; import ReactDOM from 'react-dom'; import CardSecond from './Car...
  • react ---选项卡

    2018-06-18 17:39:48
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...react--父子组件通信&lt;/title&gt; &lt;script src='react.js'&gt;&
  • 2.自己安装查看效果 先克隆该项目 git clone https://github.com/suwu150/react-flex-tabs.git 然后通过以下命令安装依赖 npm install 通过以下命令运行项目 npm start 3.flex-tabs组件...
  • import React, { Component } from 'react'; import './index.css' class TabItem extends Component { constructor(props){ super(props); this.state = { n:0 } };...
  • 查看日志方法:在webStorm输入命令monitor会弹出 ADM 就可以查看log输出了。
  • ReactJS 选项卡切换实现 应用组件 react-swipeable-views react-swipeable-views : Doc A React component for swipeable views. ❄️ https://react-swipeable-views.com/ Installation Install react-swipeable-...
1 2 3 4 5 ... 20
收藏数 3,555
精华内容 1,422
关键字:

2组选项卡 react