將 onclick 函數分享給按鈕組件 React JS

Question

我需要制作一個通用按鈕，在其中將某些屬性作為參數傳遞。 這些屬性之一是必須在單擊事件時執行的函數。

function Boton(props: { name: React.ReactNode , funcion: React.ReactNode }) {
  return (<div className="center-div"><IonButton shape="round" onClick={props.funcion}> {props.name}</IonButton></div>);
}

但我得到的是：

JSX 屬性) onClick?: ((event: React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | 未定義類型 'ReactNode' 不能分配給類型 '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | 不明確的'。 類型 'null' 不能分配給類型 '((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined'.ts(2322) index.d.ts(1455, 9)：預期的類型來自屬性 'onClick'，它在類型 'IntrinsicAttributes & Pick<IonButton, “color” | 上聲明 “強” | “禁用” | “尺寸” | “填充” | “模式”

但我不想要鼠標事件，因為它將成為一個移動應用程序。

Answer 1

看起來你給你的函數參數提供了React.ReactNode類型。 你應該給它一個函數類型。

也許是這樣的：( () => void

另外，我猜你的 name 參數應該是一個String

Answer 2

通用按鈕的“功能”道具不應該是 React.ReactNode。

我在這里使用箭頭函數，

const Button = (props: { name: React.ReactNode, onClick: Function}) => 
   (<div className="center-div">
     <IonButton shape="round" onClick={props.onClick}> 
      {props.name}
    </IonButton>
 </div>);

無論您在哪里定義通用按鈕，都要定義名稱和 onClick 道具。

希望上面的代碼能解決你的問題。