组件化开发-01.01-Tab案例重构

Tab案例重构

• 基于组件化方式重构

function Tab (props) {
  let btns = [];
  let divs = [];
  props.tabData && props.tabData.forEach(item => {
    // 产生btn列表
    btns.push(<button className={props.currentId===item.id?'active': ''} key={item.id}>{item.title}</button>)
    // 产生div列表
    divs.push(<div className={props.currentId===item.id?'active': ''} key={item.id}>{item.content}</div>)
  })
  return (
    <div className='tab'>
      {btns}
      {divs}
    </div>
  )
}

<Tab tabData={tabData} currentId={1}/>

实例-重构Tab案例

第一步：src下新建文件夹components，下面新建02.js

/*
  重构Tab案例
*/
import React from 'react'
import '../Tab.css'

// Tab函数组件
function Tab (props) {
  // let tabData = [{
  //   id: 1,
  //   title: '浪潮之巅',
  //   desc: 'IT巨头的兴衰史'
  // }, {
  //   id: 2,
  //   title: '数学之美',
  //   desc: '数学的应用场景'
  // }, {
  //   id: 3,
  //   title: '智能时代',
  //   desc: '新兴的技术潮流'
  // }]
  // let currentId = 1
  let titles = []
  let descs = []
  props.tabData.forEach(item => {
    titles.push(<button className={props.currentId===item.id?'active':''} key={item.id}>{item.title}</button>)
    descs.push(<div className={props.currentId===item.id?'desc active': 'desc'} key={item.id}>{item.desc}</div>)
  })
  let tab = (
    <div className="tab">
      <div className="title">
        {titles}
      </div>
      {descs}
    </div>
  )
  return tab
}

export default Tab

第二步：App.js进行引入

import React from 'react';
import './App.css';
// import Parent from './component/01.js'
import Tab from './component/02-重构Tab案例'

function App () {
  let tabData = [{
    id: 1,
    title: '浪潮之巅',
    desc: 'IT巨头的兴衰史'
  }, {
    id: 2,
    title: '数学之美',
    desc: '数学的应用场景'
  }, {
    id: 3,
    title: '智能时代',
    desc: '新兴的技术潮流'
  }, {
    id: 4,
    title: 'JavaScript高程',
    desc: '系统的讲解了JavaScript语法'
  }]
  return (
    <div>
      {/*<Parent/>*/}
      <Tab tabData={tabData} currentId={4}/>
    </div>
  )
}

export default App;

npm run start启动项目，显示界面