如何在react中将函数传输到功能组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleButtonClick} />
    </div>
  );
}

// 子组件
import React from 'react';

function ChildComponent({ onButtonClick }) {
  return (
    <button onClick={onButtonClick}>Click me</button>
  );
}

// 创建上下文
import React from 'react';

const MyContext = React.createContext();

// 上下文提供者
function MyProvider({ children }) {
  const handleButtonClick = () => {
    console.log('Button clicked!');
  };

  return (
    <MyContext.Provider value={handleButtonClick}>
      {children}
    </MyContext.Provider>
  );
}

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

// 子组件
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const handleButtonClick = useContext(MyContext);

  return (
    <button onClick={handleButtonClick}>Click me</button>
  );
}

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [buttonClickCount, setButtonClickCount] = useState(0);

  const handleButtonClick = useCallback(() => {
    setButtonClickCount(prevCount => prevCount + 1);
    console.log('Button clicked!');
  }, []);

  return (
    <div>
      <ChildComponent onButtonClick={handleButtonClick} />
      <p>Button click count: {buttonClickCount}</p>
    </div>
  );
}

function ChildComponent({ onButtonClick }) {
  return (
    <button onClick={onButtonClick}>Click me</button>
  );
}