让开!!!谁也别拦着我封装React组件！

1简介

我是歌谣放弃很容易但是坚持一定很酷喜欢我就一键三连哈

2前言

在我们的工作生活中每次学习一个框架我们就不免要封装组件而具备封装一个完美组件的能力我称之为"优秀"

3准备工作

父组件

<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

样式处理的还是不够完美接下来处理样式

数据格式

  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 (<ulstyle={{display: 'flex',background: '#FFFFFF',paddingLeft: '32px',width: '100%',...styles,}}>{tabs.map((item, index) => {const marginStyle =index === 0? {marginLeft: 0,}: {};return (<listyle={{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 (<ulstyle={{display: 'flex',background: '#FFFFFF',paddingLeft: '32px',width: '100%',...styles,}}>{tabs.map((item, index) => {const marginStyle =index === 0? {marginLeft: 0,}: {};return (<lionClick={() => 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 (<ulstyle={{display: 'flex',background: '#FFFFFF',paddingLeft: '32px',width: '100%',...styles,}}>{tabs.map((item, index) => {const marginStyle =index === 0? {marginLeft: 0,}: {};return (<lionMouseOver={() => 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;

运行结果