{"id":515,"date":"2026-06-23T09:33:08","date_gmt":"2026-06-23T01:33:08","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=515"},"modified":"2026-06-23T09:33:08","modified_gmt":"2026-06-23T01:33:08","slug":"react-%e5%a4%8d%e6%9d%82%e7%bb%84%e4%bb%b6%e5%b5%8c%e5%a5%97","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/23\/react-%e5%a4%8d%e6%9d%82%e7%bb%84%e4%bb%b6%e5%b5%8c%e5%a5%97\/","title":{"rendered":"React \u590d\u6742\u7ec4\u4ef6\u5d4c\u5957"},"content":{"rendered":"\n

\u590d\u6742\u9875\u9762\uff1a\u5934\u90e8\u5206\u9875\uff0c\u5de6\u4fa7\u641c\u7d22\uff0c\u53f3\u4fa7\u8868\u683c\uff0c\u8868\u683c\u652f\u6301\u5f39\u7a97\uff0c\u5f39\u7a97\u91cc\u53c8\u5d4c\u5957\u8868\u683c<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

src\\pages\\staff\\index.jsx<\/h2>\n\n\n\n
import React,{useEffect, useState} from 'react';\nimport { useSelector, useDispatch } from 'umi';\nimport TableHeader from 'components\/TableHeader';\nimport FilterForm from '.\/component\/FilterForm';\nimport SearchContainer from 'components\/SearchContainer';\nimport TableList from '.\/component\/TableList';\n\nimport '.\/css\/index.less'\nconst Index = () => {\n    const dispatch = useDispatch();\n    const [page, setPage] = useState(1);\n    const {staffList, staffTotal, staffDetail, loading} = useSelector(state => state.staff);\n    const { userInfo } = useSelector(state => state.user);\n    \n    const size = 10;\n    useEffect(() => {\n        _initStaffList();\n    },[])\n\n    const _initStaffList = (curPage)=>{\n        dispatch(\n            {\n                type:'staff\/initStaffList',\n                payload:{\n                    page: curPage || page,\n                    size,\n                }\n            }\n        );\n    }\n    const changePage = (curPage) => {\n        console.log(curPage,'curPage');\n        setPage(curPage);\n        _initStaffList(curPage || page);\n    }\n    const interfaceDelMethod = (params) => {\n        console.log(params,'params');\n    }\n    console.log(staffList,'staffList',staffTotal,'staffTotal',staffDetail, 'staffDetail');\n    return (\n        <div className=\"main-content\">\n            <TableHeader\n                page={page}\n                size={size}\n                total={staffTotal}\n                changePage={changePage}\n                interfaceDelMethod={interfaceDelMethod}\n            \/>\n            <SearchContainer render={()=><FilterForm\/>} \/>\n            <TableList \n                userInfo={userInfo}\n                staffList={staffList}\n                loading={loading}\n            \/>\n        <\/div>\n    );\n}\n\nexport default Index;\n<\/code><\/pre>\n\n\n\n
\u62c6\u5206\u4e09\u4e2a\u5916\u5c42\u7ec4\u4ef6TableHeader\u3001SearchContainer \u3001TableList <\/p>\n\n\n\n
src\\pages\\staff\\component\\TableList.jsx<\/h2>\n\n\n\n
import React, { useState, useContext, useEffect, useRef, useCallback } from 'react';\nimport { Table, Form, Input } from 'antd';\nimport {EditableRow, EditableCell} from 'components\/Editable';\nimport Columns from '.\/Columns';\nimport Dialog from 'components\/Dialog';\nimport RecordTable from '.\/RecordTable';\nconst EditableContext = React.createContext(null);\n const dataSource = [\n    {\n      key: '0',\n      name: 'Edward King 0',\n      age: '32',\n      address: 'London, Park Lane no. 0',\n      auth: '\u7ba1\u7406\u5458',\n    },\n    {\n      key: '1',\n      name: 'Edward King 1',\n      age: '32',\n      address: 'London, Park Lane no. 1',\n      auth: '\u666e\u901a\u7528\u6237',\n    }\n  ];\n\n const handleSave = (row) => { \n    console.log(row,'handleSave');\n};\n\nconst TableList = ({userInfo, staffList, loading}) => {\n  const [currentRecord, setCurrentRecord] = useState(null);\n  const [dialogStatus, setDialogStatus] = useState(false);\n  const getDialogList = useCallback((data) => { \n    setCurrentRecord(data);\n    setDialogStatus(true);\n  }, []);\n const toggleDialog = () => setDialogStatus(prev => !prev);\n  const updateStatus = (status)=>{\n    console.log(dialogStatus,'\u5207\u6362\u5f39\u7a97');\n    setDialogStatus(status);\n  }\n  const components = {\n    body: {\n      row: EditableRow,\n      cell: EditableCell,\n    },\n  };\n    return (\n      <>\n        <Table\n          components={components}\n          rowClassName={() => 'editable-row'}\n          bordered\n          dataSource={staffList}\n          pagination={false}\n          scroll = {{ x: true }}\n          rowKey= {record => record._id }\n          loading= {loading?.effects['staff\/initStaffList']}\n          columns={Columns({userInfo,handleSave, getDialogList})}\n        \/>\n        <Dialog\n          title = {currentRecord?.title||''}\n          dialogStatus = {dialogStatus}\n          setDialogStatus = {toggleDialog}\n          render={()=><RecordTable {...currentRecord} \/>}\n        \/>\n      <\/>\n    );\n}\n\nexport default TableList;\n<\/code><\/pre>\n\n\n\n
\u5c06\u8868\u683c\u5185\u5bb9\u62c6\u5206\u62102\u4e2a\u7ec4\u4ef6Table \u548c Dialog\uff0c\u5229\u7528antd\u7684Table\u548cModal<\/p>\n\n\n\n
src\\pages\\staff\\component\\RecordTable\\index.jsx<\/h2>\n\n\n\n
import React, { useEffect, useState }  from 'react';\nimport $http from 'api';\nimport { Table } from 'antd';\nimport { columnData } from '.\/renderType';\nconst RecordTable = (params) => {\n    console.log(params,'params');\n    const {title, interfaceName, requestData, type} = params;\n    const [currentData, setCurrentData] = React.useState([]);\n    const [total, setTotal] = useState(0);\n    useEffect(() => {\n       _initData();\n    }, []);\n\n    const _initData = async (page = 1,size = 5) => {\n   \n        const res = await $http[interfaceName]({...requestData, page,size});\n        console.log(res,'_initData');\n        setCurrentData(res.data.list);\n        setTotal(res.data.total);\n        console.log(res,'res');\n    }\n    const changePage = (page) => {\n        _initData(page);\n    };\n\n    return (\n        <Table\n            pagination={{ defaultPageSize: 5, onChange: changePage, total }}\n            columns={columnData[type]}\n            dataSource={currentData}\n            rowKey={columns => columns._id }\n        \/>\n           \n    );\n}\n\nexport default RecordTable;\n<\/code><\/pre>\n\n\n\n
src\\components\\Dialog\\index.jsx<\/h2>\n\n\n\n
\u5c01\u88c5Dialog\u7ec4\u4ef6<\/p>\n\n\n\n
import React from 'react';\nimport { Modal } from 'antd';\nconst Dialog = ({title, dialogStatus, render, setDialogStatus, width= 600}) => {\n    return (\n        <Modal\n         width= {width}\n         destroyOnHidden={true}\n         title={title}\n         open={dialogStatus}\n         onCancel={setDialogStatus}\n         footer={null}\n        >\n            {render()}\n        <\/Modal>\n    );\n}\n\nexport default Dialog;\n<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u590d\u6742\u9875\u9762\uff1a\u5934\u90e8\u5206\u9875\uff0c\u5de6\u4fa7\u641c\u7d22\uff0c\u53f3\u4fa7\u8868\u683c\uff0c\u8868\u683c\u652f\u6301\u5f39..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11],"tags":[31,28,29],"class_list":["post-515","post","type-post","status-publish","format-standard","hentry","category-react-","category-front","tag-ant-design","tag-react","tag-umi"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"React<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":6,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/515\/revisions\/522"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}