如何通過 typescript 中的道具發送 function

Question

Hei：我正在嘗試使用一個按鈕組件來制作 2 個獨立的東西。 一個叫做“START”，我想從我的 StoreTimer.start() 開始倒計時...另一個是“RESET”，我想從我的 StoreTimer.reset() 重置我的倒計時。 問題是我不知道該怎么做：讓我們以我的代碼為例：

 <StartButton name="Start" onClick={()=>{StoreTimer.start()}}/> <StartButton name="Reset" onClick={()=>{StoreTimer.reset()}}/> </div> </div>

這是我的 Home 組件，我在其中導入了 StartButton，我希望該按鈕有 2 個可重復使用的不同選項....例如開始我的倒計時並重置它...取決於我傳遞的 function...

這是我的組成部分

 export interface Props { name?: string; color?: string; onClick?: () => void; } export const StartButton: React.FC<Props> = ({ name, color,onClick }) => { return ( <> <div className="Buttons"> <button className={"myButton"} style={{ backgroundColor: color }} onClick={() => onClick} > {name} </button> </div> </> ); }; export default StartButton;

如果我為啟動和重置制作了一個單獨的組件，並且我沒有通過道具傳遞 function 它工作......但我想重用組件 StartButton 並做 2 個不同的大腿：重置和啟動。 我該怎么做？ 請幫助我理解。

Answer 1

嘗試將 () 添加到您的道具 function，並更改名稱 onClick 它令人困惑:)

<button className={"myButton"}
        style={{ backgroundColor: color }}
        onClick={() => onClick()}
        >
        {name}
</button>

或者像這樣：

<button className={"myButton"}
        style={{ backgroundColor: color }}
        onClick={onClick}
        >
        {name}
</button>