react 父子组件 传递函数

React 父子组件传递函数的方式有多种，以下是其中的两种常见方法：

1. 使用属性传递函数

父组件通过属性将自己的函数传递给子组件，子组件可以直接调用该函数。示例代码如下：

// 父组件
function Parent() {
  const handleClick = () => {
    console.log('button clicked')
  }

  return (
    <Child onClick={handleClick} />
  )
}

// 子组件
function Child(props) {
  return (
    <button onClick={props.onClick}>Click me</button>
  )
}

2. 使用 React Context

React Context 是一种全局的数据传递方式，可以在组件树中任意层级的组件之间共享数据。可以将函数作为 Context 的一个属性，然后在子组件中通过 useContext 来获取该函数并调用。示例代码如下：

// 创建一个 Context
const MyContext = React.createContext()

// 父组件
function Parent() {
  const handleClick = () => {
    console.log('button clicked')
  }

  return (
    <MyContext.Provider value={handleClick}>
      <Child />
    </MyContext.Provider>
  )
}

// 子组件
function Child() {
  const handleClick = useContext(MyContext)

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

以上是两种常见的 React 父子组件传递函数的方式，具体使用哪种方式取决于实际需求。