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

【问题标题】：Share onclick function to button components React JS将 onclick 函数共享到按钮组件 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

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

【问题讨论】：

标签： javascript reactjs

【解决方案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)