自定义tabs切换显示不同内容(React)

不念不忘少年蓝@ 2021-07-24 13:05 860阅读 0赞

做法:
    	(1)将要显示的内容作为插槽传入组件
    	(2)使用React.Children.map遍历插槽内容的标签属性获取标题栏内容
    			xx.props.键名
    	(3)使用React.Children.map遍历插槽内容获取要显示的元素
    			xx.props.children
    
    标题栏选中高亮
    	自定义当前索引,设置点击事件,当当前索引等于元素索引时,添加相应类名
    	
    选中标题栏显示对应内容
    	在标题栏点击事件中,当当前索引等于元素索引时,添加相应类名
    
    小写标签可以自定义,故不报错

代码示例:  
组件:

import React,{ Component} from 'react'
    import './style.less'
    
    class App extends Component{ 
    
        state={ 
            currentIndex:0
        }
    	
    	//标题栏样式函数
        check_title_index=(index)=>{ 
    
            return index===this.state.currentIndex ? 'Tab_title active':'Tab_title' 
    
        }
    	
    	//内容是否显示样式函数
        check_item_index=(index)=>{ 
            return index===this.state.currentIndex ? 'show':'hide' 
        }
    	
    	//标题栏点击事件
        tabHandler(index)
        { 
            
            this.setState({ 
                currentIndex:index
            })
        }
    
        render()
        { 
            return(
    
                <div>
                    <div className="Tab_title_wrap">
                        { 
                            
                            React.Children.map(this.props.children, (element, index) => { 
                                return (
      
                                    <div className={ this.check_title_index(index) }  onClick={ this.tabHandler.bind(this,index) } >
                                        { element.props.tabname}
                                    </div>
                                )
            
                            })
                        }
                    </div>
                    <div className="Tab_item_wrap">
                        { 
                            React.Children.map(this.props.children, (element, index) => { 
                                return (
                                    <div className={  this.check_item_index(index) }>{ element.props.children}</div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
    }
    
    export default App

使用:

import Tabs from '../../../../components/tabs/index'
    
      <Tabs>
          <tab tabname='标题1'>内容1</tab>
          <tab tabname='标题2'>内容2</tab>
      </Tabs>

样式:

.Tab_title_wrap{ 
        display: flex;
        .Tab_title{ 
          flex: 1;
          text-align: center;
          font-size: 15px;
          margin: 20px;
          border: 2px solid #ff5555;
          padding: 10px;
          margin-bottom: 0;
        }
      }
      
      .hide{ 
        display: none;
      }
      .active{ 
      	color:red;
      }
      .show{ 
        display: block;
      }

效果图  
![在这里插入图片描述][20200715162720878.png]

[20200715162720878.png]: /images/20210724/2376214ee7034d92bb7ecfcd6a37b733.png