React JS - 다른 컴포넌트에서 컴포넌트 메서드 호출

React JS - 다른 컴포넌트에서 컴포넌트 메서드 호출

컴포넌트는 2개입니다.두 번째 컴포넌트에서 첫 번째 컴포넌트의 메서드를 호출하고 싶습니다.어떻게 해야 하죠?

여기 제 코드가 있습니다.

첫 번째 컴포넌트

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

두 번째 컴포넌트

class PopupOver extends React.Component{

    constructor(){
        super();
        // here i need to call Header class function check click....
        // How to call Header.checkClick() from this class
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;

이런 거 할 수 있어요.

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

스태틱스 사용

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === 'bar';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod('bar');  // true

사실 React는 부모로부터 자녀 메서드를 호출하는 데 적합하지 않습니다.Cycle.js와 같은 일부 프레임워크에서는 부모 및 자녀 모두에서 데이터에 쉽게 액세스하여 대응할 수 있습니다.

또한, 그것은 정말로 필요하지 않을 가능성이 높습니다.기존 컴포넌트로 불러오는 것을 고려해 보십시오. 훨씬 독립적인 솔루션입니다.그러나 때로는 여전히 필요한 경우가 있으며, 그 후에는 선택의 여지가 거의 없습니다.

• 하위 메서드인 경우 전달(가장 쉽고 전달된 속성 중 하나임)
• 이벤트 라이브러리를 추가합니다. React 에코시스템에서는 Redx 라이브러리를 사용하는 Flux 접근 방식이 가장 잘 알려져 있습니다.모든 이벤트를 분리된 상태와 작업으로 구분하여 컴포넌트에서 디스패치합니다.
• 상위 구성요소에서 하위 구성요소의 기능을 사용해야 하는 경우, 세 번째 구성요소로 랩하고 보강된 소품으로 부모를 복제할 수 있습니다.

UPD: OOP의 정적 기능 등 어떤 상태도 포함하지 않는 기능을 공유할 필요가 있는 경우 컴포넌트 내부에 포함할 필요가 없습니다.따로 선언하고 필요할 때 호출하기만 하면 됩니다.

let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}

이렇게 하면 상위 구성 요소에서 하위 구성 요소의 메서드를 호출할 수 있습니다.

import React from 'react';

class Header extends React.Component {

    constructor() {
        super();
        this.childComponentRef;
    }

    getChildComponent = (childComponent) =>  {

        this.childComponentRef = childComponent;
        this.childComponentRef.sayHi();
        
    }

    render() {
        return (
            <ChildComponent getChildComponent={this.getChildComponent} />
        )
    }
};

class ChildComponent extends React.Component {

    componentDidMount () {
        this.props.getChildComponent(this);
    }

    sayHi = () => {
        alert("hi");
    }

    render() {
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default Header;

언급URL : https://stackoverflow.com/questions/39119537/reactjs-call-one-component-method-from-another-component