Reactjs 有没有更好的方法不使用bind（）将数据从子组件传递到父组件中的函数？

我使用React.Context将函数向下传递给另一个组件中的子组件。见下图。 我不习惯使用.bind将name变量传递给父组件中的函数

有没有更好的方法将数据从子组件传递到父组件中的函数而不使用.bind

请参见下面的我的代码：

import React, { Component, createContext } from 'react'

const AppContext = createContext()

class ComponentOne extends Component {

    const handleClick = (name)=> {
        alert(`Hello ${name}`)
    }

    render(){

        return(
            <AppContext.Provider 
              value={{
                  handleClick: this.handleClick
              }}>
              <p>Hello from ComponentOne</p>
            </AppContext.Provider>

        )
    }
}

const ComponentThree = props=> {
    const name = "lomse"

    return(
       <AppContext.Consumer>
          (context=>(
             <button onClick={context.handleClick.bind(null, name)}>Click me!</button>
          ))
       </AppContext.Consumer>
    )

}

您可以随时执行以下操作：

const ComponentThree = props=> {
    const name = "lomse"
    return(
       <AppContext.Consumer>
          (context=> {
             const handleClick = () => context.handleClick(name)
             return <button onClick={handleClick}>Click me!</button>
          })
       </AppContext.Consumer>
    )

}

然后：

const ComponentThree = props=> {
    const name = "lomse"
    return(
       <AppContext.Consumer>
          (context=> (
             <button onClick={context.handleClick(name)}>Click me!</button>
          ))
       </AppContext.Consumer>
    )

}

const ComponentThree = props=> {
    const name = "lomse"
    return(
       <AppContext.Consumer>
          (context=> (
             <button onClick={context.handleClick(name)}>Click me!</button>
          ))
       </AppContext.Consumer>
    )

}