项目实战 -- 发布管理

   组件封装

先进行组件的封装，因为每一次待发布已发布这些格式是一样的，所以封装一个NewsPublish组件

import React from 'react';
import { Button,Table} from 'antd';function NewsPublish(props) {//父组件传属性const columns = [{title: '新闻标题',dataIndex: 'title',render:(title,item)=>{return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>}},{title: '作者',dataIndex: 'author',},{title: '新闻分类',dataIndex: 'category',render:(category)=>{return  <div>{category.title}</div>}},{title: '操作',render:(record)=>{return <div><Button/></div>}},];return (<div><Table dataSource={props.dataSource} columns={columns} pagination={{//一页显示几条数据pageSize:5}}rowKey={item=>item.id}/></div>);
}export default NewsPublish;

需要使用的时候调用就好了

import React, { useEffect } from 'react'
import { useState } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import axios from 'axios'export default function Published() {const {username} = JSON.parse(localStorage.getItem('token'))const [dataSource,setDataSource] = useState([])useEffect(() => {axios(`/news?author=${username}&publishState=2&_expand=category`).then(res=>{setDataSource(res.data)})},[username])return (<div><NewsPublish dataSource={dataSource}></NewsPublish></div>)
}

在这里不论是待发布还是已发布，区别就只有筛选的时候状态是1还是2

所以使用自定义hooks简化一下代码

自定义hooks

自定义hooks方便进行代码的复用，状态可以直接传一个参数给自定义hooks，这样就可以复用了，传id的目的是要知道具体要增删哪条数据

import React,{ useEffect,useState } from 'react'
import axios from 'axios'function usePublish(type) {//   不是组件，是自定义hooksconst { username } = JSON.parse(localStorage.getItem('token'))const [dataSource, setDataSource] = useState([])useEffect(() => {axios(`/news?author=${username}&publishState=${type}&_expand=category`).then((res) => {setDataSource(res.data)})}, [username,type])const handlePublish = (id)=>{console.log(id)}const handleSunset = (id)=>{}const handleDelete = (id)=>{}return{dataSource,handlePublish,handleSunset,handleDelete,}
}export default usePublish

import React, { useEffect } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import usePublish from '../../../components/publish-manage/usePublish'
import { Button } from 'antd'export default function Sunset() {const {dataSource,handleSunset} = usePublish(3)return (<div><NewsPublish dataSource={dataSource} button={(id)=><Button danger onClick={()=>handleSunset(id)}>删除</Button>}></NewsPublish></div>)
}

实现方法

实现点击的时候调用的方法，每一个都不一样

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { notification } from 'antd'
import { useNavigate } from 'react-router-dom'function usePublish(type) {//   不是组件，是自定义hooksconst { username } = JSON.parse(localStorage.getItem('token'))const navigate = useNavigate()const [dataSource, setDataSource] = useState([])useEffect(() => {axios(`/news?author=${username}&publishState=${type}&_expand=category`).then((res) => {setDataSource(res.data)})}, [username, type])const handlePublish = (id) => {setDataSource(dataSource.filter((item) => item.id !== id))axios.patch(`/news/${id}`, {"publishState": 2,"publishTime": Date.now(),}).then((res) => {navigate('/publish-manage/published')notification.info({message:`通知`,description:`您可以到[发布管理/已发布]中查看您的新闻`,placement: 'bottomRight',})}) }const handleSunset = (id) => {setDataSource(dataSource.filter((item) => item.id !== id))axios.patch(`/news/${id}`, {"publishState": 3,"publishTime": Date.now(),}).then((res) => {navigate('/publish-manage/sunset')notification.info({message:`通知`,description:`您可以到[发布管理/已下线]中查看您的新闻`,placement: 'bottomRight',})}) }const handleDelete = (id) => {setDataSource(dataSource.filter((item) => item.id !== id))axios.delete(`/news/${id}`).then((res) => {notification.info({message:`通知`,description:`您已经删除了已下线的新闻`,placement: 'bottomRight',})}) }return {dataSource,handlePublish,handleSunset,handleDelete,}
}export default usePublish

import React, { useEffect } from 'react'
import NewsPublish from '../../../components/publish-manage/NewsPublish'
import usePublish from '../../../components/publish-manage/usePublish'
import { Button } from 'antd'export default function Sunset() {const {dataSource,handleDelete} = usePublish(3)return (<div><NewsPublish dataSource={dataSource} button={(id)=><Button danger onClick={()=>handleDelete(id)}>删除</Button>}></NewsPublish></div>)
}

就这样