将 onclick 函数共享到按钮组件 React JS

Posted 2023-02-21

【中文标题】将 onclick 函数共享到按钮组件 React JS

【英文标题】：Share onclick function to button components React JS

【发布时间】：2021-01-12 06:18:47

【问题描述】：

我需要制作一个通用按钮，在其中我将某些属性作为参数传递。其中一个属性是点击事件时必须执行的函数。

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) => void) | 未定义类型“ReactNode”不可分配给类型“（（事件： MouseEvent) => void) |不明确的'。 类型‘null’不可分配给类型‘((事件： MouseEvent) => void) | undefined'.ts(2322) index.d.ts(1455, 9)：预期类型来自 属性“onClick”，在此处以“IntrinsicAttributes”类型声明 & Pick

但我不想要鼠标事件，因为它将是一个移动应用程序。

【参考方案1】：

您似乎在为您的函数参数提供React.ReactNode 类型。 你应该给它一个函数类型。

可能是这样的：() => void

另外，我猜你的名字参数应该是String

【参考方案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 道具。

希望以上代码能解决您的问题。

【讨论】：

谢谢。这就是我得到的：(JSX 属性) onClick?: ((event: React.MouseEvent) => void) |未定义类型'Function'不可分配给类型'(event: MouseEvent) => void'.ts(2322)