كيف أقوم بتمرير props إلى المكون الأب في React.js؟

يبدو أن هناك خطأ في بنية السؤال نفسه، فأنت لست في حاجة إلى تمرير props من مكون ابن إلى المكون الأب، ولذلك لأن المكون الأب لديه بالفعل هذه الـ props في المقام الأول، ولا يجب أن يكون المكون الأبن أكثر تعقيدًا من هذا:

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

في حين أن المكون الأب لديه بالفعل هذه الـ props:

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // يمكن الوصول إلى كل الـ props مباشرة من هنا
     alert("The Child button text is: " + this.state.childText);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

وهنا نفس الأمثلة السابقة لكن بإستخدام ES6 التي تسهل عليك كتابة الكود وتوضحه أكثر.

المكون الأبن:

const Child = ({onClick, text}) => (
  <button onClick={onClick}>{text}</button>
)

المكون الأب:

const Parent = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
            alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

كما أن الحدث event يحتوي على العنصر نفسه من خلال إستخدام e.target وهكذا تستطيع الوصول إلى كل أجزاء العنصر من داخل المكون الأب، لذلك لست في حاجة إلى تمرير أي props من المكون الأبن إلى المكون الأب. وهنا إقتباس من موقع react الرسمي يوضح أن الـ props هي الطريقة الوحيدة الني يستطيع المكون الأب التفاعل مع المكون الابن (خلال تدفق البيانات العادي dataflow)

اقتباس

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props.

المصدر: Refs and the DOM

هل يمكنك إخبارنا لماذا تريد تمرير props إلى اﻷب؟ إذا كنت تريد تغيير شيء في اﻷب مثلاً تريد تغيير state معينة فسأشرح لك كيفية عمل ذلك بمثال، ليكن الكود التالي:

const Parent = () => {
  const [tasks,setTasks] = useState([]);
  return (
    <ul>
    {tasks.map(v => (
     	<Child task={v}/>
    ))}
    </ul>
  );
}
const Child = (props) => {
  const {task} = props;
  return (
    <div>
    	<button type="button">Delete</button>
    	{task.name}
    </div>
  );
}

في الكود السابق نريد عند الضغط على الزر داخل Child component نريد حذف task ضمن اﻷب فكيف نفعل ذلك ونحن لا نستطيع تمرير props إلى اﻷب؟!!!

ببساطة يمرر اﻷب تابع إلى اﻻبن بالشكل التالي:

const Parent = () => {
  const [tasks,setTasks] = useState([]);
  const onDelete = (task) => {
    const tasksAfterDelete = ... // implement delete functionality however you like
    setTasks(tasksAfterDelete);
  }
  return (
    <ul>
    {tasks.map(v => (
     	<Child task={v} onDelete={onDelete}/>
    ))}
    </ul>
  );
}
const Child = (props) => {
  const {task,onDelete} = props;
  return (
    <div>
    	<button type="button" onClick={() => onDelete(task)}>Delete</button>
    	{task.name}
    </div>
  );
}

لاحظ أننا مررنا تابع onDelete من اﻷب إلى اﻻبن واستدعيناه في اﻻبن، هذا الكود هو pattern شائع جداً في React حيث يستقبل اﻻب تابعاً ينفذه عند وقوع حدثٍ ما واﻷب هو من يقرر ماذا سيحصل عند وقوع هذا الحدث. اﻻبن لا يهمه ماذا يفعل اﻷب عند وقوع هذا الحدث، قد يقوم اﻷب مثلاً بطلب Ajax ثم يحدّث state بالـresponse لهذا الطلب مثلاً.

لا توجد طريقة لتمرير props من مكون فرعي إلى مكون رئيسي. ومع ذلك ، يمكننا دائمًا نقل functions من العنصر الأصل إلى المكون الفرعي. يمكن للمكون الفرعي بعد ذلك الاستفادة من هذه functions. يمكن function بعد ذلك تحديث state في المكون الرئيسي .

وهذا مثال حول ذلك

import React from 'react';

function Increment({ count, onClickIncrement }) {
  return (
    <div>
      {count}
      <button onClick={onClickIncrement}>increment</button>
    </div>
  );
}

export default function Main() {
  const [count, setCount] = useState(1);

  const onClickIncrement = () => {
    setCount(count++);
  };

  return (
    <div>
      <Increment count={count} onClickIncrement={onClickIncrement}></Increment>
    </div>
  );
}

مرحباً @Adam Ebrahim

يمكنك فعل هذا باستخدام طريقتين: 

1. استخدام ال props وأن توفر دالة من ال parent لل child كما في التعليقات السابقة.
2. استخدام ال reference  ( لكن ستتحكم بأي شيئ بداخل child ) والطريقة كالآتي:
   إنشاء reference لل child component كالآتي 

   class Child extends React.Component {
     componentDidMount() {
       const { ref } = this.props;
   
       ref(this); // تقوم بإعطاء نسخة من الإبن للأب ليتحكم في كل شيئ بداخله ليس فقط ال props 
     }
     
     runChildLog() {
       console.log('I\'m Child')
     }
     
     // لنفترض أن هذه قائمة الخواص التي تريد تجميعها للأب
     get parentProps() {
     	return {
         prop1: 'A',
         prop2: 'B',	
       }
     }
     
     render() {
     	return(
       	<button>Click Me</button>
       );
     }
   }

   لنفترض أن ال parent
    

   import Child from './Child';
   
   class Parent extends React.component {
   
     checkChild = () => {
     	// هنا نستطيع الدخول لأي prop في ال child
      	// كمثال نريد الحصول على ال parentProps
       console.log('child Props', this.childRef.parentProps)
       
       // كمثال لو أردنا استدعاء أي دالة في ال child
       this.childRef.runChildLog();
     }
     
     render() {
     	return(
         <Child 
         	ref={ref => this.childRef = ref} // هنا نوفر ال مرجع للأب
         />
         <button onClick={this.checkChild}>check Child</button>
       );
     }
   }