React TypeScript组件中onButtonClick未使用问题求助

你当前的问题是在Button组件中声明了onButtonClick props但未实际调用，导致出现“已声明但未使用”的提示。核心原因是你给按钮绑定了自定义的buttonAlert函数，而没有用到父组件传递的onButtonClick回调。

方案一：直接使用父组件传递的回调 #

直接将按钮的onClick事件绑定到onButtonClick上，同时可以删除无用的buttonAlert函数，这样就能完全复用父组件定义的点击逻辑：

修改后的Button.tsx代码：

import React from "react";

interface ButtonProps {
    name: string;
    onButtonClick: () => void;
}

function Button(props: ButtonProps) {
    const { name, onButtonClick } = props;

    return (
        <div>
            <button className="buttonOne" onClick={onButtonClick}>{name}</button>
        </div>
    );
}

export default Button;

方案二：组件内部先执行逻辑再调用父组件回调 #

如果需要在按钮点击时先执行组件内部的操作（比如你的alert('Testing')），再触发父组件的回调，可以在buttonAlert函数里调用onButtonClick：

修改后的Button.tsx代码：

import React from "react";

interface ButtonProps {
    name: string;
    onButtonClick: () => void;
}

function Button(props: ButtonProps) {
    const { name, onButtonClick } = props;

    function buttonAlert() {
        alert(`Testing`);
        // 调用父组件传递的点击回调
        onButtonClick();
    }

    return (
        <div>
            <button className="buttonOne" onClick={buttonAlert}>{name}</button>
        </div>
    );
}

export default Button;

两种方案都能解决“未使用”的提示，选择哪种取决于你是否需要组件内部额外的点击逻辑。

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