【REACT-组件封装1】

业务要求：三个表格，只有最后一列的操作按钮不同。

1. NewsPublish.js

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Button, Tag, Table, notification } from "antd";

export default function AuditList(props) {
  const handlePublish = (id) => {
    axios
      .patch(`/news/${id}`, { publishState: 2, publishTime: Date.now() })
      .then((res) => {
        props.history.push(`/publish-manage/published`);
        notification.info({
          message: `通知`,
          description: `你可以到[发布管理-已发布]中查看您的新闻`,
          placement: "bottomRight",
        });
      });
  };

  const columns = [
    {
      title: "新闻标题",
      dataIndex: "title",
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>;
      },
    },
    {
      title: "作者",
      dataIndex: "author",
      render: (author) => {
        return <span>{author}</span>;
      },
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      render: (category) => {
        return <span>{category?.value}</span>;
      },
    },
    {
      title: "操作",
      render: (item) => {
        return <div>{props.button(item.id)}</div>;
      },
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={props.dataSource}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      ></Table>
    </div>
  );
}

2. usePublish.js

import { useState, useEffect } from "react";
import axios from "axios";
import { notification } from "antd";
export default function usePublish(type) {
  const { username } = JSON.parse(localStorage.getItem("token"));
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    axios
      .get(`/news?username=${username}&publishState=${type}&_expand=category`)
      .then((res) => {
        setDataSource(res.data);
      });
  }, [username, type]);

  const handlePublish = (id) => {
    setDataSource(dataSource.filter((data) => data.id !== id));
    axios
      .patch(`/news/${id}`, { publishState: 2, publishTime: Date.now() })
      .then((res) => {
        notification.info({
          message: "通知",
          description: `您可以到【发布管理-已发布】查看您的新闻`,
          placement: "bottomRight",
        });
      });
  };
  const handleSunset = (id) => {
    setDataSource(dataSource.filter((data) => data.id !== id));
    axios.patch(`/news/${id}`, { publishState: 3 }).then((res) => {
      notification.warn({
        message: "通知",
        description: `您可以到【发布管理-已下线】查看您的新闻`,
        placement: "bottomRight",
      });
    });
  };
  const handleDelete = (id) => {
    setDataSource(dataSource.filter((data) => data.id !== id));
    axios.delete(`/news/${id}`).then((res) => {
      notification.warn({
        message: "通知",
        description: `您已删除已下线的新闻`,
        placement: "bottomRight",
      });
    });
  };

  return {
    dataSource,
    handlePublish,
    handleSunset,
    handleDelete,
  };
}

3. 应用页面

import NewsPublish from "../../../components/publish-manage/NewsPublish";
import usePublish from "../../../components/publish-manage/usePublish";
import { Button } from "antd";

/**
 * 已发布
 */
export default function Published() {
  const { dataSource, handleSunset } = usePublish(2);
  return (
    <div>
      <NewsPublish
        dataSource={dataSource}
        button={(id) => (
          <Button type="primary" danger onClick={() => handleSunset(id)}>
            下线
          </Button>
        )}
      ></NewsPublish>
    </div>
  );
}