| React+antDesign封装一个tab组件(类组件) | 您所在的位置：网站首页 › react封装table组件ts › React+antDesign封装一个tab组件(类组件) |
React+antDesign封装一个tab组件(类组件)
|
前言 我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀" 简单的父子组件父组件子组件 import React, { Component } from 'react'; class GeYao extends React.Component { render() { console.log(this, 'this'); console.log(this.props, 'props'); console.log(this.state, 'state'); return 我是歌谣; } } export default GeYao; 结果
需要做一个类似于这样的tab切换的组件
备注:一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。这时候 我们想着这样的数据格式必须给个数组 然后父组件绑定值 变化1数据格式const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ]; 父组件子组件 ``` import React, { Component } from 'react'; class GeYao extends React.Component { render() { const { tabs = [] } = this.props; console.log(this, 'this'); console.log(this.props, 'props'); console.log(this.state, 'state'); return ( {tabs.map((item, index) => { return {item.name || item.value || ''}; })} );} } export default GeYao; ``` 运行结果
样式处理的还是不够完美 接下来处理样式 变化1数据格式const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ]; 父组件子组件 ``` import React, { Component } from 'react'; class GeYao extends React.Component { render() { const { tabs = [], styles, itemStyles } = this.props; console.log(this, 'this'); console.log(this.props, 'props'); console.log(this.state, 'state'); return ( {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( {item.name || item.value || ''} ); })} );} } export default GeYao; ``` 运行结果
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ]; 父组件子组件 ``` import React, { Component } from 'react'; class GeYao extends React.Component { constructor(props) { super(props); this.state = { selectTab: props.selectTab || '', }; } /** * 切换tab * @param {Boolean} doNot 是否不做任何事情，如果存在此值，不执行父组件切换方法,仅仅刷新样式 */ handleTabClick(key, doNot) { console.log(key, 'key'); this.setState({ selectTab: key, }); } render() { const { selectTab } = this.state; const { tabs = [], styles, itemStyles } = this.props; return ( {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( this.handleTabClick(item.key)} style={{ color: item.key === selectTab ? '#1890FF' : '#000000A6', borderBottom: item.key === selectTab ? '2px solid #1890FF' : '', padding: '0px 1.5% 8px', cursor: 'pointer', whiteSpace: 'nowrap', ...itemStyles, ...marginStyle, }} key={item.key} > {item.name || item.value || ''} ); })} );} } export default GeYao; ``` 运行结果
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ]; 父组件子组件 ``` import React, { Component } from 'react'; class GeYao extends React.Component { constructor(props) { super(props); this.state = { selectTab: props.selectTab || '', mouseOverTable: '', }; } /** * 切换tab * @param {Boolean} doNot 是否不做任何事情，如果存在此值，不执行父组件切换方法,仅仅刷新样式 */ handleTabClick(key, doNot) { console.log(key, 'key'); this.setState({ selectTab: key, }); if (!doNot) { try { this.props.onTabSearch(key); } catch (error) {} } } render() { const { selectTab, mouseOverTable } = this.state; const { tabs = [], styles, itemStyles } = this.props; return ( {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( this.setState({ mouseOverTable: item.key })} onMouseLeave={() => this.setState({ mouseOverTable: 'mouseLeave' })} onClick={() => this.handleTabClick(item.key)} style={{ color: item.key === selectTab || item.key === mouseOverTable ? '#1890FF' : '#000000A6', borderBottom: item.key === selectTab ? '2px solid #1890FF' : '', padding: '0px 1.5% 8px', cursor: 'pointer', whiteSpace: 'nowrap', ...itemStyles, ...marginStyle, }} key={item.key} > {item.name || item.value || ''} ); })} );} } export default GeYao; ``` 运行结果
我是歌谣 放弃很容易 但是坚持一定很酷 谢谢你的鼓励 微信公众号前端小歌谣 加入前端巅峰交流群
|
【本文地址】