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;

運行結果

圖解

?

?則封裝完成

我是歌謠 放棄很容易 但是堅持一定很酷 謝謝你的鼓勵 微信公眾號小歌謠 一起學習 謝謝

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。