طريقة استدعاء دوال في child component من parent component

مرحباً بك :
ليس لديك وصول مباشر لجميع الدوال بداخل ال  child ولكن يمكنك الوصول عن طريق إعطاء ref من ال child إلى ال parent ومن ثم استدعاء الدالة
 

class Parent extends Component {
  fireChildAlert = () => {
  	// التحقق من وجود مرجع للمكون Child
    // ومن ثم استدعاء الدالة بداخله
    this.childRef && this.childRef.getAlert();
  }
  
  render() {
    return (
      // ربط مرجع المكون الداخلي بالكون Parent
      <Child ref={ref => this.childRef = ref}>
      	// تنفيذ الدالة عند الضغط
        <button onClick={() => this.fireChildAlert()}>Click</button>
      </Child>
      );
    }
  }

class Child extends Component {
  // إعطاء مرجع للمكونات التي تستخدم هذا المكون
  componentDidMount() {
  	this.props.ref(this);
  }
  
  getAlert() {
    alert('clicked');
  }
 
  render() {
    return (
      <h1 >Child component</h1>
    );
  }
}

إن استدعاء Child.getAlert هو في الحقيقة محاولة استدعاء تابع static على الصف Child ولكن getAlert هو instance method وليس static method.

حتى تستدعي instance method تحتاج إلى reference للـinstance التي يبنيها react والتي تتحقق باستخدام ما يسمى بـref بالشكل اﻵتي:

class Parent extends Component {
  constructor(){
    this.childRef = React.createRef();
    this.findChildAlert = this.findChildAlert.bind(this);
  }
  fireChildAlert() {
  	// التحقق من وجود مرجع للمكون Child
    // ومن ثم استدعاء الدالة بداخله
    this.childRef.current && this.childRef.current.getAlert();
  }
  
  render() {
    return (
      // ربط مرجع المكون الداخلي بالكون Parent
      <Child ref={this.childRef}>
      	// تنفيذ الدالة عند الضغط
        <button onClick={() => this.fireChildAlert()}>Click</button>
      </Child>
      );
    }
  }

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

مع ذلك لماذا تريد استدعاء تابع من اﻻبن بهذا الشكل؟ ألا تستطيع تحقيق الميزة التي تريدها من دون ذلك؟ شخصياً لا أفضل استعمال ref بهذه الطريقة ولو تخبرنا بهدفك الحقيقي من استدعاء getAlert لربما نعطيك طريقة أفضل من refs.

بالمناسبة الـref ليس فقط من أجل Components بل هو يعمل على html elements أيضاً وحينها يعطيك الـReactJS مؤشراً على DOM Element ، مثال:

class A extends React.Component{
  constructor(){
    this.inputRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    // inputRef.current is HTMLInputElement
    this.inputRef.current && this.inputRef.current.focus();
  }
  render(){
    return (
     <div>
       <input type="text" ref={this.inputRef} />
       <button onClick={this.handleClick()}>Click to Focus on input </button>
     </div>
    );
  }
  
}

يمكن قراءة المزيد في هذا الرابط: https://reactjs.org/docs/refs-and-the-dom.html