1簡(jiǎn)介

我是歌謠 放棄很容易 但是堅(jiān)持一定很酷 喜歡我就一鍵三連哈

?2前言

在我們的工作生活中 每次學(xué)習(xí)一個(gè)框架我們就不免要封裝組件 而具備封裝一個(gè)完美組件的能力 我稱之為"優(yōu)秀"

?3準(zhǔn)備工作

父組件

<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;

打印結(jié)果

?需求介紹

我們需要做一個(gè)類似于這樣的tab切換的組件

備注:一個(gè)簡(jiǎn)單的區(qū)分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。

思路

這時(shí)候 我們想著這樣的數(shù)據(jù)格式必須給個(gè)數(shù)組

然后父組件綁定值

變化1

數(shù)據(jù)格式

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;

運(yùn)行結(jié)果

?圖解示意

?變化2

樣式處理的還是不夠完美 接下來處理樣式

?

?數(shù)據(jù)格式

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;

運(yùn)行結(jié)果

圖解

?

此時(shí) 我想著得寫出一個(gè)切換的效果

變化3

??數(shù)據(jù)格式

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 是否不做任何事情，如果存在此值，不執(zhí)行父組件切換方法,僅僅刷新樣式*/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;

運(yùn)行結(jié)果

?圖解

?此時(shí) 我想加入移入效果 并將數(shù)據(jù)回調(diào)出來

變化4

?

??數(shù)據(jù)格式

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 是否不做任何事情，如果存在此值，不執(zhí)行父組件切換方法,僅僅刷新樣式*/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;

運(yùn)行結(jié)果

圖解

?

?則封裝完成

我是歌謠 放棄很容易 但是堅(jiān)持一定很酷 謝謝你的鼓勵(lì) 微信公眾號(hào)小歌謠 一起學(xué)習(xí) 謝謝

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的让开!!!谁也别拦着我封装React组件！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。