Как вызвать функцию которая находится внутри компоненты из другой компоненты в React?

Question

[Wood Walker]

Суть вопроса в названии, мне нужно из 1 класса вызвать функцию другого класса.

Answer 1

[Роман Александрович]

Если вам нужно вызвать функцию из родителя в потомке то это можно сделать так

class Parent extends Component {
 render() {
  return (
    <div>
      <Child ref="child" />
      <button onClick={() => this.refs.child.getAlert()}>Click</button>
    </div>
  );
 }
}

class Child extends Component {
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1>Hello</h1>
  );
 }
}

а если вам нужно из потомка вызвать функцию в родителе то

class Parent extends Component {
myfunction(){
alert('work');
}
 render() {
  return (
    <div>
      <Child myFunction={()=>this.myfunction()} />
    </div>
  );
 }
}

class Child extends Component {
 
 render() {
  return (
    <div><button onClick={() => this.props.myFunction()}>myFunction</button></div>
  );
 }
}

Comments

[Wood Walker]

Схематично конструкция приложения такова

class Parent extends Component {
с{
alert('work');
}
 render() {
  return (
    <div>
      <Child />
    </div>
  );
 }
}

class Child extends Component {
 funcChild(){

}
 render() {
  return (
    
  );
 }
}

И мне нужно в child вызвать функцию myfunction(), и если есть такая возможность вызвать ее в funcChild()

[Роман Александрович]

Виталий Семенов,

class Parent extends Component {
с{
alert('work');
}
 render() {
  return (
    <div>
      <Child  с={()=>this.c()}/>
    </div>
  );
 }
}

class Child extends Component {
 
 render() {
  return (
    <div><button onClick={() => this.props.c()}>c</button></div>
  );
 }
}

Answer 2

[Андрей]

class Main extends Component {
 static myfunction(){
alert('work');
}
 render() {
  return (
    <div>
      <Child myFunction={()=>this.myfunction()} />
    </div>
  );
 }
}

class MyComponent extends Component {
 
 render() {
  Main.myfunction()
  return (
    <div><button onClick={() => this.props.myFunction()}>myFunction</button></div>
  );
 }
}