如何复用带动画效果的Button组件实现多场景事件触发

当然可以！这正是组件复用的核心意义所在——把通用的UI（比如你那个带炫酷动画的Button）和具体业务逻辑拆分开，完全不需要重复写动画代码，只靠传递不同的事件处理函数就能适配各种场景～

核心就是让你的AnimatedButton组件接收一个点击事件属性（比如onClick），把具体的点击逻辑交给使用它的父组件来定义，组件本身只负责渲染带动画的按钮UI。下面用React为例（Vue/Angular等框架思路类似）：

1. 改造你的AnimatedButton组件 #

先把组件改成支持接收外部传入的点击事件，同时保留自身的动画逻辑：

// AnimatedButton.jsx
import React from 'react';
import './AnimatedButton.css'; // 这里是你的动画样式文件

const AnimatedButton = ({ onClick, children, disabled = false }) => {
  // 这里可以保留组件内部的动画相关逻辑（比如hover/点击时的状态处理）
  return (
    <button
      className="animated-button" // 绑定你的动画类名
      onClick={onClick} // 触发外部传入的点击事件
      disabled={disabled}
    >
      {children} {/* 接收按钮上的文字，比如"提交"/"查看数据" */}
    </button>
  );
};

export default AnimatedButton;

2. 在不同场景中复用组件 #

场景1：提交用户信息的组件 #

导入AnimatedButton，定义提交逻辑并传给它：

// UserSubmitForm.jsx
import React from 'react';
import AnimatedButton from './AnimatedButton';

const UserSubmitForm = () => {
  const handleSubmit = async () => {
    // 这里写提交用户信息的业务逻辑
    try {
      // 比如调用API提交表单数据
      // await api.submitUserInfo(formData);
      alert('用户信息提交成功！');
    } catch (err) {
      console.error('提交失败:', err);
    }
  };

  return (
    <form>
      {/* 表单输入项 */}
      <input type="text" placeholder="用户名" />
      <input type="email" placeholder="邮箱" />
      
      {/* 复用带动画的Button，传入提交逻辑 */}
      <AnimatedButton onClick={handleSubmit}>提交信息</AnimatedButton>
    </form>
  );
};

export default UserSubmitForm;

场景2：展示用户数据的组件 #

同样导入AnimatedButton，这次传入展示数据的逻辑：

// UserDataViewer.jsx
import React, { useState } from 'react';
import AnimatedButton from './AnimatedButton';

const UserDataViewer = () => {
  const [userData, setUserData] = useState(null);

  const handleShowData = async () => {
    // 这里写获取并展示用户数据的逻辑
    try {
      // const data = await api.getUserData();
      // setUserData(data);
      setUserData({ name: '张三', email: 'zhangsan@example.com' });
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  };

  return (
    <div>
      {/* 复用Button，传入展示数据的逻辑 */}
      <AnimatedButton onClick={handleShowData}>查看用户数据</AnimatedButton>
      
      {/* 数据展示区域 */}
      {userData && (
        <div className="user-data">
          <p>用户名：{userData.name}</p>
          <p>邮箱：{userData.email}</p>
        </div>
      )}
    </div>
  );
};

export default UserDataViewer;

进阶优化（可选） #

如果需要更多自定义能力，还可以给AnimatedButton添加更多props，比如额外的样式类、按钮类型（submit/button）等，让组件更灵活：

const AnimatedButton = ({ 
  onClick, 
  children, 
  disabled = false, 
  className = '',
  type = 'button'
}) => {
  return (
    <button
      className={`animated-button ${className}`}
      onClick={onClick}
      disabled={disabled}
      type={type}
    >
      {children}
    </button>
  );
};

这种方式完美遵循了单一职责原则：AnimatedButton只专注于做“带动画的按钮”这件事，而具体的业务逻辑交给使用它的组件来实现，既避免了重复代码，又能轻松适配各种不同的使用场景。

内容的提问来源于stack exchange，提问作者Abdul Wahab