前言
我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀"
简单的父子组件
父组件
<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; ```
运行结果
图解
总结
我是歌谣 放弃很容易 但是坚持一定很酷 谢谢你的鼓励 微信公众号前端小歌谣 加入前端巅峰交流群