日安。我已经创建了一个NextJS应用程序，在应用程序页面中，我调用了一个我创建的名为ButtonComponent的组件。该组件有一个名为“buttonClick”的prop，它被传递到组件内部的onClick处理程序中。然后，我将一个带有控制台日志的函数从应用程序页面传递到ButtonComponent作为prop。然而，在单击按钮时，应用程序页面的控制台日志未显示。
注意-我已经在ButtonComponent中的另一个函数中传递了该函数，以确保onClick被触发。代码如下。

应用页面

import React from "react";

import "./homePage.css";

import ButtonComponent from "@/Components/ButtonComponent/ButtonComponent";

const Home = () => {
  const buttonClick = async () => {
    "use server";
    console.log("Function from the App Page");
  };

  return (
    <main className="homepage">
      <div>
        <ButtonComponent
          className={"sales-button"}
          label={"Sales"}
          buttonClick={buttonClick}
        />
      </div>
    </main>
  );
};

export default Home;

字符串

按钮组件

"use client";
import React from "react";

import "./buttonComponent.css";

const ButtonComponent = ({
  label = "Button",
  buttonClick,
  className = "button",
}: any) => {
  const handleClick = () => {
    console.log("Check to see if onClick is triggering");
    buttonClick();
  };
  return (
    <button className={className} onClick={handleClick}>
      {label}
    </button>
  );
};

export default ButtonComponent;

型
我是NextJS的新手，我查找的文档或问题都没有显示出这个特定问题的解决方案。
我确实尝试过传递一个数组，看看是否有props被传递，很明显，它们被传递了。只是函数没有被触发。