매개 변수가 있는 함수를 reactj의 소품을 통해 전달

매개 변수가 있는 함수를 reactj의 소품을 통해 전달

컴포넌트 계층에서 부모에서 자녀의 자녀까지 이어지는 기능이 있습니다.평소에는 크게 문제가 되지 않겠지만, 아이로부터 파라미터를 받아야 합니다.현재 다음 오류 메시지가 나타납니다.

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

요약하자면, 저는 제 기능을 다음과 같이 전달하고 있습니다.SomeComponent까지 쭉 내려가서ChildComponent2버튼을 클릭할 때마다 호출하여 에서 파라미터를 전달합니다.ChildComponent2.

감사합니다!

왜 그런 오류가 발생하는지 알 수 없지만, 당신은 그것을 해야 합니다.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>)
    }
}

함수 호출을 다른(화살표) 함수로 줄 바꿈하는 것은 불필요할 뿐더러 매개 변수를 제대로 전달하지 않습니다(모든 중간 화살표 함수가 매개 변수를 수락하지 않으므로).

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

또,reatjs기능 컴포넌트

export default function SomeComponent() {
  const myFunction = (param) => {
    console.log("do something: ", param);
  };
  return (
    <div>
      <ChildComponent1 yourFunction={myFunction} />
    </div>
  );
}

export function ChildComponent1({ yourFunction }) {
  return (
    <div>
      <ChildComponent2 parentFunction={yourFunction} />
    </div>
  );
}

export function ChildComponent2({ parentFunction }) {
  return <Button onClick={() => parentFunction(param)}>SomeButton</Button>;
}

언급URL : https://stackoverflow.com/questions/41369497/passing-a-function-with-parameters-through-props-on-reactjs