Question

我有一个函数，它从父级一直到组件层次结构中子级的子级。通常这不会是一个太大的问题，但我需要从孩子那里收到一个参数。我目前收到此错误消息：Uncaught（在promise中）TypeError：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>)
    }
}

所以只是为了解决这个问题：我将myFunction作为一个道具从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>)
      }
}

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

2 个答案: