reactjs에서 다른 구성 요소의 메서드를 호출하려면 어떻게해야합니까?

Question

그냥 시도 reactjs는 내가 다른 구성 요소의 메소드를 호출 할 상황에 걸쳐 온 :

class MyComp extends React.Component { 

callMe(){ 
... 
     } 
} 

그래서 mycomp2 :

import MyComp from 'myComp'; 

class MyComp2 extends React.Component { 

test(){ 
     MyComp.callMe(); 
     } 
} 

내가 어떻게 할 수 있습니까?

Answer 1

방법 callMe이를 사용하지 않는 경우, 당신은 그런 식으로 그것을 사용하는 정적로 declear 수 있습니다. 그렇지 않으면

class MyComp extends React.Component { 

    static callMe(){ 
    ... 
    } 
} 

, 당신은 그것을 작동하도록 심판를 사용할 수 있습니다.

당신은해야합니다 : 그것은 당신의 구성 요소가 서로 관련이 있는지에 따라 달라집니다 https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 2

수 없습니다. 반응 구성 요소에서는 그렇게 할 수 없습니다. 유일한 방법은 해당 기능을 공통 조상으로 이동하는 것입니다.

물론, 다른 방법이 있습니다. 왜 redux를 고려하지 않습니까? redux 상태를 통해 구성 요소 대화에 반응합시다. 그런 식으로, 당신은 결코이 수수께끼를 갖지 못할 것입니다.

Answer 3

. 하나가 부모이고 다른 하나가 자식 인 경우 함수는 부모에서 자식으로 전달할 수 있습니다.

class Parent extends React.Component { 
    callMe() { 
     console.log('called'); 
    } 

    render() { 
     return (
      <Child doSomething={() => this.callMe()} /> 
     ); 
    } 
} 

class Child extends React.Component { 
    render() { 
     <button onClick={this.props.doSomething}>Calls the parent fn</button> 
    } 
} 

또는 그들이 부모 - 자식 관계가 아닌 경우에, 당신은 다음, 함수가 살 수있는 부모 구성 요소를 소개 같은 방법으로 소품을 통해 전달해야합니다.

이러한 접근 방식 중 어느 것도 적합하지 않은 것으로 판단되면 달성해야하는 동작을 알려주십시오. 그러면 코드를 구조화하는 방법이 달라질 수 있습니다.