在不使用bind（）的情况下将数据从子组件传递到父组件中的函数的更好方法？

Question

我正在使用InvalidIndexError: Reindexing only valid with uniquely valued Index objects 将函数向下传递给另一个组件内部的子组件。参见下图。 为了将名称变量传递给父组件中的函数，我不太愿意使用React.Context。

是否有更好的方法将数据从子组件传递到父组件中的函数而无需使用.bind()？

请参见下面的代码：

.bind()

Answer 1

您可以随时这样做：

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

}

您正在做的是绑定参数，因此以后调用函数时，将使用这些参数进行调用。它与React Context无关。

and onClick必须是一个函数，在单击时会被调用。

或者您可以这样做：

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

然后：

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

}