react tab选项卡切换

时间 2020-07-06

标签 react tab 选项切换栏目 React 繁體版

原文原文链接

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

html代码css

<!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代码html

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)java

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-tabreact