React组件封装(点击按钮弹出对话框)

最新推荐文章于 2025-06-01 09:05:21 发布

本地跑没问题

最新推荐文章于 2025-06-01 09:05:21 发布

阅读量735

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_59742742/article/details/134971849

本文介绍如何使用React和antd库创建一个可复用的组件，该组件接受提示文字、对话框标题和内容作为参数，实现鼠标悬停提示和点击弹出对话框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

实现一个组件：鼠标移动到按钮上有提示文字、点击按钮会弹出一个对话框
现在想实现通用性：即对这个组件进行封装复用，我们只需要传入提示文字，对话框标题和内容即可

代码

import React, { useState } from 'react';
import { Button, Modal, Tooltip } from 'antd';
import styled from 'styled-components'; 


const CustomModal = styled(Modal)`
  .ant-modal-content {
    border-radius: 8px;
  }

  .ant-modal-header {
    background-color: #f0f0f0;
  }

  .ant-modal-title {
    color: #333;
  }

  .ant-modal-body {
    padding: 20px;
  }

  .ant-modal-footer {
    border-top: none;
  }
`;



function MyComponent({ refreshKey,tip,title,content }) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [refresh, setRefresh] = useState(false);


  const handleClick = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const refreshComponent = () => {
    setRefresh(prevRefresh => !prevRefresh);
  };

  return (
    <div>
      <Tooltip title={tip?tip:"这是一个提示文本"}>
        <Button onClick={handleClick}>点击弹出对话框</Button>
      </Tooltip>

      <CustomModal 
            title={title?title:"对话框标题" }
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            okText="确定"
            cancelText="取消" 
            maskClosable={true}
      >
        <p>{content?content:"对话框标题" }</p>
      </CustomModal>
    </div>
  );
}

export default MyComponent;

import {Button} from 'antd'
import MyComponent from '../../component/customModal/MyComponent';
import './App.css';

function App() {

  async function handclick(){
    const res = await getClasses()
    console.log(res)
  }

  return (
    <div className='app'>
        <MyComponent tip={"tip"} title={"我的封装组件"} content={"点击按钮弹出对话框"}></MyComponent>
    </div>
  );
}

export default App;