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