通过 reactjs 上的 props 传递带参数的函数

Question

我有一个从父级一直到组件层次结构中子级的函数。通常这不会有太大问题，但我需要从孩子那里接收一个参数。 我目前收到此错误消息：

Uncaught (in promise) TypeError: this.props.myFunction is not a function.

这是我正在做的示例代码：

class SomeComponent extends Component{

    constructor(props){
        super(props);
        //does whatever stuff        
        this.myFunction = this.myFunction.bind(this);

    }

    //(only applicable to raw and normal forms)
    myFunction(param){
        console.log('do something: ', param);
    }

    render(){
     return (<div><ChildComponent1 myFunction={()=>this.myFunction()}/></div>)
    }
}

class ChildComponent1{
      render(){
  return (<div><ChildComponent2 myFunction={()=>this.props.myFunction()}/></div>)
    }
}

class ChildComponent2{
      render(){
  return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>)
    }
}

总结一下：我将 myFunction 作为 prop 从 SomeComponent 一直传递到 ChildComponent2，我希望在单击按钮时调用它并从 ChildComponent2 传递参数.

谢谢！

Answer 1

我不明白您为什么会收到该错误，但您应该这样做 myFunction={this.myFunction} 和 myFunction={this.props.myFunction}：

class SomeComponent extends Component{

    constructor(props){
        super(props);
        //does whatever stuff        
        this.myFunction = this.myFunction.bind(this);

    }

    //(only applicable to raw and normal forms)
    myFunction(param){
        console.log('do something: ', param);
    }

    render(){
     return (<div><ChildComponent1 myFunction={this.myFunction}/></div>)
    }
}

class ChildComponent1{
      render(){
  return (<div><ChildComponent2 myFunction={this.props.myFunction}/></div>)
    }
}

class ChildComponent2{
      render(){
  return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>)
    }
}

将函数调用包装在另一个（箭头）函数中是不必要的，并且不会正确转发参数（因为所有中间箭头函数都不接受参数）。

Answer 2

另一种 IMO 更干净的方法是这样的：

class SomeComponent extends Component{
    myFunction = param => {
        console.log('do something: ', param);
    }

    render(){
     return (
       <div>
         <ChildComponent1 onClick={this.myFunction}/>
       </div>)
    }
}

class ChildComponent1{
      render(){
        return (<div><ChildComponent2 onClick={this.props.onClick}/></div>)
      }
}

class ChildComponent2{
      render(){
        const { onClick } = this.props // destructure
        return (<Button onClick={()=>onClick(param)}>SomeButton</Button>)
      }
}