让开!!!谁也别拦着我封装React组件!
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 新手学习Java必需要知道的这些基本概念
- 下一篇: Eclipse: select at l