在 NextJS 组件中执行 `onClick` 的正确方法是什么？

Question

在使用 NextJS 做我的项目时，我遇到了一个部分，我制作了一个名为

app_buttonGray

，它看起来像这样：

// /components/app_buttonGray.js
export default function AppButtonGray({ size, children }){
    return(
        <button className={`flex w-${size ? size : "36"} mt-2 p-1 rounded-md bg-gray-500 hover:bg-gray-800 shadow-lg justify-center`}>
            {children}
        </button>
        
    )
}

稍后在我的页面中我想创建多个按钮，但每个按钮都有不同的用途 所以我想像这样实现

onClick

：

<AppButtonGray size="48" onClick={ () => alert(1)}>New project</AppButtonGray>
<AppButtonGray size="48" onClick={ () => alert(2)}>Open project</AppButtonGray>

但这似乎不起作用...

经过多次意图，我想出了这个修改，使其发挥作用：

// /components/app_buttonGray.js
export default function AppButtonGray({ size, onClick, children }){
    return(
        <button onClick={onClick} className={`flex w-${size ? size : "36"} mt-2 p-1 rounded-md bg-gray-500 hover:bg-gray-800 shadow-lg justify-center`}>
            {children}
        </button>
        
    )
}

所以我必须通过参数传递

onClick

，然后在组件内部调用它......

这是完成这项工作的正确方法吗？如果不是那么正确的方法是什么？谢谢

Answer 1

是的，这是完成您想要做的事情的正确方法。在 React 中，如果您希望应用任何自定义属性，则始终必须将它们传递给要返回的元素。

实现此目的的另一种方法是使用 rest 语法 (

...

) 获取传递给组件的所有剩余 props 并将它们传播到子组件上。

//                                                      Get the remaining props
export default function AppButtonGray({ size, children, ...props }) {
  return (
    <button
      className={`flex w-${
        size || "36"
      } mt-2 p-1 rounded-md bg-gray-500 hover:bg-gray-800 shadow-lg justify-center`}
      {...props}
    >
      {children}
    </button>
  );
}

这是将您想要的任何道具传递给子组件的有效方法，但在尝试理解组件时，它的可读性可能会更差。这就是为什么某些 ESLint 配置不允许此策略（您可以在此处阅读更多相关信息）。

我个人认为在大多数情况下你应该坚持你的制作方式，从长远来看，当你试图理解你编写的代码时，你会感谢自己。

Answer 2

您可以像使用它一样简单地使用 onClick ：

type Props = {
  children: React.ReactNode;
  onClick?: (e: any) => void;
};

const Button: React.FC<Props> = ({ children, onClick }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

现在在你的父级中，你可以简单地解析一个函数。但请确保您使用“使用客户端”：

"use client"
import Button from "./Button";

<Button onClick={() => {alert("test");}}>Click</Button>