Reactjs 在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

发布于08月22日

我正在try 在Next13应用程序中创建一个按钮组件，该组件可以接受将在onClick事件上执行的props 函数.当然，它被宣布为'use client'

Button.tsx

"use client";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

const Button = ({ children, onClick }: ButtonProps) => {
  return (
    <button
      className="bg-secondary-color py-4 px-14 rounded text-white"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

这是我的实现页面(服务器组件)

<Button onClick={() => console.log("hello from parent")}>
  <Link href="/test">Navigate to test</Link>
</Button>

在我的页面中，我可以看到一个错误:

100

我怎么才能解决它呢？我知道我可以在我的页面顶部添加‘使用客户端’，但如果这是一个简单的登录页面，并且这个按钮是页面上唯一的交互元素，这是不是一个好方法？

我还希望这个按钮组件是通用的，并根据实现执行功能，这是Reaction的本质.

我该怎么解决这个问题呢？哪种方法最适合这种类型的实施？

"use client"; type ButtonProps = { children: React.ReactNode; onClick: () => void; }; const Button = ({ children }: ButtonProps) => { return ( <button className="bg-secondary-color py-4 px-14 rounded text-white" onClick={() => console.log('hello from child')} > {children} </button> ); }; export default Button;

Reactjs 在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

推荐答案

Reactjs相关问答推荐

如何使用react-router-dom导航到网页中的其他路由？

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态，而不是呈现？<>

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

将对象添加到集合中的数组时的no_id字段

如何使Reaction Select 选项菜单从选项数组的特定索引开始

如何在react 流中使用文本区域和改变 node 的输入大小？

更改购物车中的产品数量后，PayPal Reaction/Next JS按钮未更新

在新屏幕上显示照片时出现问题-react

当项目开始时，它不会从三元运算符(REACT)加载一些tailwind 类名称

是否为Reaction中未使用的组件生成Tailwincss样式？

使用VITE的Reaction应用程序的配置是否正确？

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

拖放 - 将排序保存到数组字段

如何根据ReactJS中元素列表中的布尔值仅显示一次值

将外部 JavaScript 导入 React(通过文件)

Github 页面无法正确呈现 CSS，因为它是本地的

错误：无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

react 页面更新

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用？

多次响应获取发送请求