NodeJS 为什么Next.js抛出事件处理程序不能传递给客户端组件 prop ,即使组件顶部有“使用客户端”?

3phpmpom  于 2023-08-04  发布在  Node.js
关注(0)|答案(1)|浏览(423)

我的bundler创建了一个简单的React组件,如下所示

"use client";
"use strict";var a=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var n in o)r(t,n,{get:o[n],enumerable:!0})},c=(t,o,n,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of i(o))!s.call(t,e)&&e!==n&&r(t,e,{get:()=>o[e],enumerable:!(u=b(o,e))||u.enumerable});return t};var B=(t,o,n)=>(n=t!=null?a(l(t)):{},c(o||!t||!t.__esModule?r(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(r({},"__esModule",{value:!0}),t);var x={};m(x,{Button:()=>k});module.exports=f(x);var p=B(require("react")),k=()=>p.createElement("button",{onClick:()=>alert("boop")},"Boop");0&&(module.exports={Button});
//# sourceMappingURL=Button.js.map

字符串
尽管它的顶部有“use client”,但Next.js仍会抛出错误Error: Event handlers cannot be passed to Client Component props. {onClick: function, children: "Boop"}
注解中要求的组件实际代码

"use client";

import * as React from "react";

export const Button = () => {
  return <button onClick={() => alert("boop")}>Boop</button>;
};

yhuiod9q

yhuiod9q1#

我试图通过手动复制你的组件代码到node_modules文件夹中的一个虚拟包中来模拟这个错误。我注意到,当我在导入和导出这个组件的index.js文件上添加"use client"时,它工作得很好。我不知道为什么会这样,但它很好地解决了这个问题。
你们的出口商品是这样的吗

- your-package
  - index.js
  - Button
    - Button.js
    - index.js <- add "use client" on top of this file. (this file will import and export the Button)

字符串
仅在导入import {Button} from "your-package/Button"时有效

相关问题