传递事件作为Props：TypeScript自定义Button组件连接MetaMask无响应问题求助

核心问题分析 #

你的代码存在两个关键错误，导致按钮点击后无响应：

1. MetaMask连接函数未执行
   在handleClick的else分支中，你仅返回了connect函数本身，并未调用它。必须添加括号connect()才能触发MetaMask连接逻辑。

2. 账号已连接时的跳转逻辑无效
   if (account)分支里，你只是创建了<Link>JSX元素，但没有实际触发导航动作。点击事件中需要使用编程式导航，而非直接渲染Link组件。

修复后的代码 #

Navbar组件修复版 #

// 导入useNavigate用于编程式导航
import { useNavigate } from 'react-router-dom';
import { useAccount } from "../context";
import { CustomButton } from "./";

const Navbar = () => {
  const { connect, account } = useAccount();
  const navigate = useNavigate(); // 初始化路由导航钩子

  return (
    <div className="sm:flex hidden flex-row justify-end gap-4">
      <CustomButton
        btnType="button"
        title={account ? "Create a campaign" : "Connect"}
        styles={account ? "bg-[#1dc071]" : "bg-[#8c6dfd]"}
        handleClick={() => {
          if (account) {
            // 编程式跳转到创建页面
            navigate('create-campaign');
          } else {
            // 调用connect函数触发MetaMask连接
            connect();
          }
        }}
      />
    </div>
  );
};

额外验证点 #

• 确认useAccount上下文内的connect函数逻辑正确，需包含MetaMask连接核心代码（例如调用window.ethereum.request({ method: 'eth_requestAccounts' })）。
• 你的CustomButton组件已正确绑定onClick事件，这部分代码无问题，可排除组件本身的事件传递错误。

内容的提问来源于stack exchange，提问作者0xhaz