Truyền chức năng với các tham số thông qua các đạo cụ trên reactjs

Question

Tôi có một chức năng đến từ một phụ huynh đến tận con của một đứa trẻ trong một hệ thống phân cấp thành phần. Thông thường điều này sẽ không quá nhiều vấn đề, nhưng tôi cần nhận thông số từ đứa trẻ. Tôi hiện đang nhận được thông báo lỗi này: Uncaught (trong lời hứa) TypeError: this.props.myFunction không phải là một hàm.

Dưới đây là một ví dụ mã với những gì tôi một thực hiện:

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>) 
    } 
} 

Vì vậy, chỉ để một số nó lên: Tôi đang đi qua myFunction như một chỗ dựa từ SomeComponent tất cả các con đường xuống ChildComponent2, trong đó tôi muốn nó được gọi bất cứ khi nào một nút được nhấp và để chuyển một tham số từ ChildComponent2.

Cảm ơn!

Answer 1

Tôi không thấy lý do tại sao bạn sẽ nhận được lỗi đó, nhưng bạn nên làm myFunction={this.myFunction} và 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>) 
    } 
} 

Bao bì các cuộc gọi chức năng bên trong một (mũi tên) chức năng chỉ là không cần thiết và sẽ không chuyển tiếp thông số đúng (vì tất cả các hàm mũi tên trung gian của bạn không chấp nhận tham số).