React + TypeScript 搭建多Tab頁腳手架

React-admin-ts-starter

React + Typescript 開發的後端多頁腳手架

前言

關於這個腳手架項目：

1. 爲了公司多個產品模塊可以統一，這樣維護起來比較輕鬆
2. 公司產品的上一個版本用 layui 開發，有 Tab 多頁（因此...）
3. 爲了和市面上大衆UI區分開（雖然能夠用 Antd，而後覆蓋樣式，我的不喜歡），內置了須要的組件和部分特點功能
4. 內置皮膚（與內置組件結合），繼承原來產品的意志
5. 順便整理一下，拿出來騙星，GitHub地址

因爲代碼比較簡單，註釋全面，同時使用了 TypeScript，新手拿來上手和參考，也是不錯的。

若是發現不妥之處，麻煩道友 issues 指出。

如何使用？

git clone https://github.com/Itroads/react-admin-ts-starter.git

cd react-admin-ts-starter

yarn

yarn start

有哪些特別之處？

• 多 Tab 頁，靈活切換
• 內置部分組件（其中 Modal 組件，可拖動，範圍可設定）
• 內置皮膚，也能夠自定義
• 可支持，左中右結構，就像 win 上的不少應用那樣，固然這是可選項

內置組件說明

Modal

Params 參數說明

參數名稱	類型	說明	是否必須
Component	Component	彈窗顯示的組件內容	必須
options	Object	width?:string, height?:string, imgSrc:any, title:string	必須
ParentFn	Function	父組件傳入的方法，如：點擊肯定，所觸發的方法	必須
dataToChildren	Any	父組件傳遞給子組件的值	必須
localDialog	Object	ref:React.RefObject, tabId:string, addFn:Fn, delFn:Fn。不傳則爲全局彈窗	可選

import React, { Component } from 'react'
import createModal from '../../components/modal'
import CreatNewRole from './creatNewRole'

class Demo extends Component {
	constructor(props: any) {
	    super(props)
	    this.container = React.createRef();
	}
	
    public container: React.RefObject<HTMLDivElement>;
   
	showNewModal () {
	    createModal(CreatNewRole,{
          width: '650px',
          height: '360px',
          imgSrc: require('../../assets/logo.png'),
          title: '添加角色'
        },this.creatRole, '',{
	      ref: this.container, 
	      tabId: this.props.activeTabId, // 來自 store
	      addFn: this.props.addDialogData, // 來自 store
	      delFn: this.props.deleteDialogData // 來自 store
    	 })
  	}
  	
  	render() {
	  	return (
	  		<div ref={this.container}> ... </div>
	  	)
  }
}
複製代碼

注意：包裹彈出組件的父節點，要設置 position: relative; ，由於遮罩層採用絕對定位。因此，遮罩範圍，取決於設置了相對位置的父節點。
彈窗內部的組件，可經過調用 this.props.close() 來關閉彈窗

Alert

Params

一共包含四個子組件： createConfirm createInfo createWarning createError
和一個供外部調用的關閉方法 clearAlert，直接調用便可 clearAlert()

屬性名稱	類型	說明	是否必須	範圍
msg	String	彈窗的文字描述信息	必須	通用
cb	Function	Confirm 彈窗，點擊肯定的回調方法	必須	Confirm

import React, { Component } from 'react'
import { createConfirm, createInfo, createWarning, createError, clearAllAlert } from '@components/alert/alert'

class Demo extends Component {

	/** * confirm 點擊確認按鈕的回調 * @param {any} params */
  confirmCallBack (params) {
    console.log('test', params)
    clearAllAlert()
  }

  showNewConfirm () {
    createConfirm('肯定要刪除xxx ？', this.confirmCallBack.bind(this, 123))
  }

  showNewInfo () {
    createInfo('肯定要刪除xxx ？')
  }

  showNewWarning () {
    createWarning('警告信息')
  }

  showNewError () {
    createError('錯誤信息')
  }
  
  render() {
  	return (
  		...
  	)
  }

}
複製代碼

Toast

Params

屬性名稱	類型	說明	是否必須
text	String	彈窗的文字描述信息	必須
time	Number	Toast 彈窗，指定時間後消失，默認1500毫秒	可選

Demo

import React, { Component } from 'react'
import Modal from '@components/modal/modal'

class Demo extends Component {
	showToast () {
      createToast('帳號或密碼錯誤帳號或密碼錯誤', 2000)
  	}
  	
  	render() {
	  	return (
	  		...
	  	)
   }
}

複製代碼

Menu

Params

屬性名稱	類型	說明	是否必須
data	Array	菜單數據	必須
activeTabId	String	當前頁面的ID，來自 Store	可選
openOrToggleTabBox	Function	左側菜單導航，處理 tabBox 方法，來自 store	可選
operateCallBack	Function	右側操做菜單回調函數	可選
tabModalCount	Number	當前 tab 頁的彈窗數量	可選

Demo

左側菜單

import * as React from 'react'
import { connect } from 'react-redux'
import { addTabBox, setDefaultTab } from '../../reducers/tabBoxReducer'

class Demo extends Component {
	
  	render() {
	  	return (
	  		<Menu data={this.state.data} activeTabId={this.props.activeTabId} openOrToggleTabBox={this.props.addTabBox} /> ) } } const mapStateToProps = (state: any) => ({ activeTabId: state.tabBoxState.activeTabId }) const mapDispatchToProps = (dispatch: any) => ({ addTabBox: (tabItem: ITabItem) => dispatch(addTabBox(tabItem)), setDefaultTab: (tabItem: ITabItem) => dispatch(setDefaultTab(tabItem)) }) export default connect(mapStateToProps, mapDispatchToProps)(Demo) 複製代碼

右側菜單

import * as React from 'react'
import { connect } from 'react-redux'
import { addDialogData, deleteDialogData } from '../../../../reducers/modalReducer'

class Demo extends Component {
	
  	render() {
	  	return (
	  		<Menu data={this.state.rightMenuData} operateCallBack={(value: string) => this.menuOperate(value)} tabModalCount={this.props.modalState ? this.props.modalState[this.props.activeTabId] : null} /> ) } } const mapStateToProps = (state: any) => ({ activeTabId: state.adminTabBoxState.activeTabId, modalState: state.modalState }) const mapDispatchToProps = (dispatch: any) => ({ addDialogData: (key: string) => dispatch(addDialogData(key)), deleteDialogData: (key: string) => dispatch(deleteDialogData(key)) }) export default connect(mapStateToProps, mapDispatchToProps)(Demo) 複製代碼

你可能存在的疑惑？

皮膚太醜？

打開 /src/utils

-utils
	-skin-files
		-darkBlack.ts // 輸出皮膚樣式的對象
		-darkBlue.ts
		...
	-skin.ts // 輸出全局的，皮膚樣式

複製代碼

發揮你的設計靈感吧！

哪裏控制 Tab 頁面？

打開 /src/pages/home/pageBox.tsx 我想，裏面的註釋，應該足夠解釋了

如何實現的多Tab頁？

核心就是 redux 狀態管理，盡在 /src/reducers，裏面的註釋能夠幫你解惑

感謝

技術的道路老是崎嶇，前行的路上得到了不少幫助，雖然我很眇小，但接受的幫助也會銘記。
爝神 方少 衆'狼友' 以及衆多，在我問出小白的問題時，同樣認真幫助解答的人。

特別報道： 爝神的 Node 框架 Daruk 震撼登場！

最後

每一個成長起來的人，都是曾經的小白，雖然我不是 真·大佬 ，但也但願，新人在求知的路上可以不被嘲笑，可以獲得真誠的幫助。

能夠加個人 WX ，一塊兒學習探討。

Itroad