前言
我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀"
简单的父子组件
父组件
<Geyao/>
子组件
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 <div>我是歌谣</div>; } } export default GeYao;
结果
需求介绍
需要做一个类似于这样的tab切换的组件
备注:一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。这时候 我们想着这样的数据格式必须给个数组 然后父组件绑定值
变化1
数据格式
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ];
父组件
<GeYao tabs={tabs} />
子组件
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 ( <ul> {tabs.map((item, index) => { return <li key={item.key}>{item.name || item.value || ''}</li>; })} </ul> ); } } export default GeYao;
运行结果
图解示意
变化2
样式处理的还是不够完美 接下来处理样式
样式处理的还是不够完美 接下来处理样式
变化1
数据格式
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ];
父组件
<GeYao tabs={tabs} />
子组件
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 ( <ul style={{ display: 'flex', background: '#FFFFFF', paddingLeft: '32px', width: '100%', ...styles, }} > {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( <li style={{ color: '#1890FF', borderBottom: '2px solid #1890FF', padding: '0px 1.5% 8px', cursor: 'pointer', whiteSpace: 'nowrap', ...itemStyles, ...marginStyle, }} key={item.key} > {item.name || item.value || ''} </li> ); })} </ul> ); } } export default GeYao;
运行结果
图解
变化3
数据格式
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ];
父组件
<GeYao tabs={tabs} />
子组件
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 ( <ul style={{ display: 'flex', background: '#FFFFFF', paddingLeft: '32px', width: '100%', ...styles, }} > {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( <li onClick={() => 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 || ''} </li> ); })} </ul> ); } } export default GeYao;
运行结果
图解
变化4
数据格式
const tabs = [ { key: '', value: '全部' }, { key: '1', value: '已审核' }, { key: '2', value: '未审核' }, ];
父组件
<GeYao tabs={tabs} onTabSearch={this.handleTabChange} />
子组件
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 ( <ul style={{ display: 'flex', background: '#FFFFFF', paddingLeft: '32px', width: '100%', ...styles, }} > {tabs.map((item, index) => { const marginStyle = index === 0 ? { marginLeft: 0, } : {}; return ( <li onMouseOver={() => 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 || ''} </li> ); })} </ul> ); } } export default GeYao;
运行结果
图解
总结
我是歌谣 放弃很容易 但是坚持一定很酷 谢谢你的鼓励 微信公众号前端小歌谣 加入前端巅峰交
