لوحة المتصدرين

في نسخ لارافيل ماقبل 5.0 كان التابع dd بهذا الشكل: function dd() { array_map(function($x) { var_dump($x); }, func_get_args()); die; } ولكن بدءً من النسخة 5 وما فوق أصبح بالشكل التالي: function dd() { array_map(function ($x) { (new Dumper)->dump($x); }, func_get_args()); die(1); } بما أن Dumper يستخدم Symfony VarCloner وبالتالي AbstractCloner وهذا الصف بدوره له قيمة $maxItems تساوي بشكل افتراضي 2500. وفي حال كان لديك 17 عنصر في كل مصفوفة، إن ناتج الضرب ب 147 = 2499 ولذلك المصفوفة بعد العنصر 147 يتم إزالة مقطعها الأخير أي العناصر الأبناء. في حال أردت زيادة القيمة الافتراضية لصف Dumper، يمكن ذلك بعمل Override له كالتالي: public function dump($value) { if (class_exists(CliDumper::class)) { $dumper = 'cli' === PHP_SAPI ? new CliDumper : new HtmlDumper; $cloner = new VarCloner(); $cloner->setMaxItems(5000); $dumper->dump($cloner->cloneVar($value)); } else { var_dump($value); } } ومن إحدى الحلول الأخرى، نقوم بإنشاء صف مساعد جديد helper وتضمينه في bootstrap: use Illuminate\Support\Debug\HtmlDumper; use Symfony\Component\VarDumper\Cloner\VarCloner; use Symfony\Component\VarDumper\Dumper\CliDumper; function ddd() { $args = func_get_args(); $defaultStringLength = -1; $defaultItemNumber = -1; $defaultDepth = -1; foreach ($args as $variable) { $dumper = 'cli' === PHP_SAPI ? new CliDumper() : new HtmlDumper(); $cloner = new VarCloner(); $cloner->setMaxString($defaultStringLength); $cloner->setMaxItems($defaultItemNumber); $dumper->dump($cloner->cloneVar($variable)->withMaxDepth($defaultDepth)); } die(1); }

يمكن إيجاد ملف الإعدادات للموقع الخاص بك، عن طريق terminal كالتالي: cd ~/.config/valet/Nginx أما للوصول للإعدادات الرئيسية في nginx الخاصة ب valet، فيتم التوجه لها عن طريق: cd /usr/local/etc/nginx/valet حيث يمكن تغييرها ضمن الملف valet.conf أما لتغيير مكان الطباعة فيجب تغيير السطرين التاليين إلى المكان المناسب الذي سيتم فيه طباعة الرسائل: access_log "/Users/[user_id]/.config/valet/Log/access.log"; error_log "/Users/[user_id]/.config/valet/Log/nginx-error.log"; حيث يتم استبدال user_id بالمستخدم المسجّل دخوله إلى النظام. وبعدها يجب إعادة التشغيل لضمان حفظ الإعدادات الجديدة: valet restart sudo systemctl restart nginx

يمكنك استخدام الأمر التالي flutter downgrade <version>

كما أخبر الأخ وائل، لا يوجد سعر محدد لإستخدام خرائط جوجل، تعتمد خرائط جوحل على نضام Pay-as-you-go pricing في التسعير بحيث أن التكلفة مرتبطة بعدد الطلبات التي تقوم بها ونوعيتها ولا يوجد أي اشتراك شهري أو سنوي، ولأقرب الموضوع سأذكر لك المتغيرات التالية التي تأثر في التكلفة: عدد الطلبات التي سترسلها إلى خادم جوجل: يقوم بجوجل بوضع تسعيرة معينة لكل طلب، فمثلًا لنقل أن كل طلب ب 1$، اذا تم ارسال 100 طلب ستكون التكلفة 100دولار واذا أرسلت 1000 ستكون التكلفة 1000 دولار وهكذا ( هذا مثال فقط، أغلى طلب تساوي قيمته 0.02 دولار، أما بقية الطلبات فثمنها 0.002 أو 0.007 ) نوعية الطلبات التي ستقوم بإرسالها: يحتوي جوجل على مجموعة من الخدمات، مثلًا: الخرائط الثابتة Static Maps: وهي خدمة تقدم لك خريطة ثابتة على شكل صورة يمكن أن تضعها في <img /> في HTML مثلًا. الخرائط الدينامكية Dynamic Maps: وهي خدمة تمكن من عرض خرائط ديناميكية، يمكن التفاعل معها، عن تكبير تصغير الخريطة، تغير شكلها .. الإتجاهات Directions API: وتستطيع من خلالها طلب معلومات عن طريقة التوجه من نقطة معينة إلى أخرى. Distance Matrix : تمكن من حساب مسافة بين نقطتين أو مجموعة من النقاط. Places في حالة كنت تريد أن تقوم بعمل Autocomplete للبحث عن مكان أو عنوان ما. ... فهذه الأنواع وغيرها لكل منها سعر لكل طلب، بحيث ان سعر الخرائط الثابتة مثلًا هو 0.002 دولار لكل طلب، بينما سعر الخرائط الدينامكية هو 0.007 دولار لكل طلب. أود أن أذكر أيضًا أن جوجل تقدم استخدامًا مجانيًا، أعتقد أنه يساوي 200 دولار شهريًا ( غير متأكد من الرقم )، في حالة لم تصل إلى هذا الرقم لا يقوم النظام بقطع أي مبالغ، لكن عندما تفوق التكلفة هذا الرقم يقوم النظام بإقتطاع المبلغ المستهلك. بالنسبة لمشروعك ستستخدم في الغالب Dynamic Maps لعرض الخرائط، وأماكن الأشخاص كحد أدنى. ويمكن أن تزيد بعض الخدمات الأخرى على حسب طلب العميل، كالإتجاهات أو البحث عن الاماكن وهكذا. هذه الرابط يحتوي على كافة التفاصيل المتعلقة بالتسعير. PRICING

بدأت أتعلم redux بالأمس فقط وعند محاولة التطبيق يظهر لي الخطأ التالي عندما أحاول تشغيل مشروع React كنت أعمل عليه: ./src/components/App/App.js Attempted import error: 'combineReducers' is not exported from '../../store/reducers/'. وأعتقد أن سبب الخطأ هو هذا السطر في ملف App.js import { combineReducers } from '../../store/reducers'; بالرغم من أني قمت بعمل export بشكل صحيح في ملف store/reducers: export default combineReducers({followerReducers, friendsReducers});

سبب الخطأ هو أنك تقوم بـexport default لذا يتم عمل import بالطريقة التالية: import rootReducer from '../../store/reducers'; لقد سميته rootReducer وليس combineReducers ﻷن rootReducer هو نتيجة استدعاء التابع combineReducers وليس التابع نفسه كما أن combineReducers يجب أن يأتي من redux. بشكل عام أي export default يتم عمل import بالطريقة أعلاه أما export عادية فيتم عمل import لها بنفس طريقتك السابقة، إليك مثالاً يوضح اﻷمر: // somefile.js export function add(a,b){return a+b;} export function sub(a,b){return a-b;} export default function mul(a,b){return a * b;} // someOtherfile.js import mul,{add,sub} from "somefile.js"; mul(2,3) // 6 add(2,3) // 5 sub(2,3) // -1

عند استخدام التصدير الافتراضي بهذا الشكل: export default function cube(x) { return x * x * x; } ليس عليك أن تستخدم الإستيراد المجزء بل نقوم بإستدعاء الدالة مباشرة // يسبب السطر التالي خطأ import { cube } from 'my-module'; // هذه الطريقة الصحيحة import cube from 'my-module'; لذلك يجب عليك أن تعدل السطر التالي: import { combineReducers } from '../../store/reducers'; // ليصبح هكذا import combineReducers from '../../store/reducers'; يمكنك أن تقرأ أكثر حول التصدير في جافاسكريبت من موسوعة حسوب.

السلام عليكم ورحمة الله وبركاتة. أريد تحميل الاكواد المشروحة فى كل فديو ... هل يمكن أرفاق جميع الملفات المستخدمة فى كل فديو على انفراد ؟

هل هناك طريقة أخرى لوضع عنوان الصفحة في المتصفح غير document.title import React from 'react'; export default function Blog() { useEffect(() => { document.title = 'المدونة'; }, []); return ( <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quos veniam commodi at. Corporis consequuntur dolor odit natus adipisci enim provident iusto atque consequatur amet minima, velit id cupiditate incidunt. </div> ); }

قابلتني المُشكلة التالية عند إستخدام مكتبة Laravel Socialite عبر Api أحاول تمرير الكود إلى واجهة برمجة التطبيقات الخاصة بي لجلب المستخدم ولكنه يستمر في إعطائي خطأ: Fatal error: Call to a member function pull() on null و هذه المراحل التي أتبعها: أرسل طلبًا إلى api لعنوان url لجلب الكود: Socialite::with('facebook')->stateless()->redirect()->getTargetUrl() ثم أرسل طلبًا باستخدام عنوان url الذي تم جلبه أعلاه ، و أرسل الكود إلى واجهة برمجة التطبيقات لجلب المستخدم: $fb_user = Socialite::with('facebook')->user(); لقد استخدمت الحزمة من قبل وهي تعمل بشكل جيد عندما يكون لدي تطبيق يعيد تحميل الصفحة.

بما أنك تستخدم الحزمة عبر API فإنك تحتاج إلى إستخدام stateless في كل من الطلب الأول و الطلب الثاني فبدل: <?php Socialite::with('facebook')->stateless()->redirect()->getTargetUrl(); $fb_user = Socialite::with('facebook')->user(); إستخدم: <?php Socialite::with('facebook')->stateless()->redirect()->getTargetUrl(); $fb_user = Socialite::with('facebook')->stateless()->user();

حاليا عندي فقط هاي Hardware XBee S2C XBee Shield USB XBee Shield DH11 sensor RFID-RC522 PIR sensor لاكتشاف الحركة وتشغيل led

أقوم باستخدام Laravel Valet في بيئة التطوير لبناء المشروع، ولكن عند رفعه إلى السيرفر لا يمكنني رؤية رسائل الخطأ التي تحدث. والتي يجب أن تكون موجودة في المسار نفسه: ~/.valet/Log nginx-error.log كيف يمكنني إيجاد ملف إعدادات النظام php / nginx للارافيل valet، وماهي الإعدادات التي يجب تغييرها لطباعة رسائل الخطأ في المكان المناسب؟

أرى دائماً على موقع مستقل الكثير من المشاريع التي يمكن أن تكون مناسبة لك. مثلاً، يطلب أصحاب المشاريع مدقق لغوي لمراجعة كتابات والتأكد من صحتها وسلامتها اللغوية والنحوية والإملائية. يقوم البعض الآخر بطلب كتابة مقالات حول الكثير من المواضيع (البرمجة، الرياضة، الإقتصاد). أنصحك أن يكون لك مدونة إلكترونية تعرض فيها كتاباتك وأعمالك، وحاول دائماً تعلم أشياء جديدة لزيادة فرصك في الحصول على مشروع.

يمكنك استيراد ملف ال css بهذه الطريقة وهكذا أنت استخدمت css module وهذا سيضمن لك تصنيفات خاصة فقط بالمكون الذي قمت باستيراد ملف ال css له import React from 'react'; import styles from '../styles/navbar.css'; export default function Navbar() { return ( <div> <h1 className={styles.brand}>Logo</h1> <ul className={styles.navlist}> <li className={styles.navitem}>link1</li> <li className={styles.navitem}>link2</li> <li className={styles.navitem}>link3</li> <li className={styles.navitem}>link4</li> </ul> </div> ); }

كل الشكر لك الغالي نجح الامر

الخطوات التي قمت بها كلها صحيحة عدا تسمية المتغير البيئي ففي مشروع منتج من create-react-app يكون من المفروض عليك أن تبدأ تسمية المتغيرات البيئية ب REACT_APP كالتالي : REACT_APP_devapi=http://localhost:4000/api import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_devapi }); export default instance; وكل مرة تضيف أو تغير متغير بيئي عليك باعادة تشغيل السيرفر

ك مبرمجين عادةً ما نتريث عندما تكون هناك تحديثات كبيرة ل بيئة عمل معينة لذا انصحك ب الانتظار لمدة اسبوعين أو ثلاثة قبل التحديث ل نسخة Flutter 2 يمكنك التراجع عن التحديث والابقاء على الاصدار السابق ريثما تستقر النسخة وهذه نصيحتي لك اما في حال كن ترغب في التجربة على النسخة الحديثة ف تتبع الرابط التالي والذي يحتوي على اهم الاخطاء في التحديث الجديد وكيفة معالجتها على أمل أ، تكون الاخطاء الموجودة لديك منها https://github.com/flutter/flutter/wiki/Flutter-Cherrypick-Process

لقد قمت بتعديل الإجابة. يجب أن نستخدم الـ references بإستخدام current: flatListRef.current.scrollToIndex({ ... })

حل رائع لكن اعتقد ان به خطأ لانه ظهر لى هذا الخطأ flatListRef.scrollToIndex is not a function. (In 'flatListRef.scrollToIndex({ index: index, animated: true })', 'flatListRef.scrollToIndex' is undefined)

يمكنك إستخدام scrollToIndex وهي method جاهزة تأتي مع FlatList للذهاب إلى index معين. لاحظ أن scrollToIndex تأخذ object وليس رقم. فيمكنك إعطائها object وبداخل هذا الـ object ستضع property إسمها index تساوي الـ index التالي. أولاً، يجب عليك أن تحصل على reference للـ FlatList عن طريق useRef هكذا: function App() { const flatListRef = React.useRef(null); const [index, setIndex] = React.useState(0); const goForward = () => { setIndex(index + 1); flatListRef.scrollToIndex({ index: index, animated: true }); }; return ( <FlatList ref={flatListRef} data={cakes} renderItem={renderItem} /> ); } يوجد لدى FlatList الكثير من الـ methods والخصائص. يمكنك دائماً أن تتفقد صفحة الـ API لهذا الـ component من هنا.

عليك أولاً أن تسأل صاحب المشروع عن طريقة الدفع التي يريدها. بعض أصحاب المشاريع لا يفضلون خدمات PayPal أو Stripe، ويطلبون خدمات محلية. الخطوة الثانية هي البحث عن ما إذا كانت خدمة الدفع هذه متاحة للـ framework الذي تعمل به. إذا كان المطلوب هو إستخدام PayPal، ستجد أنه الكثير من المكتبات لـ React Native جاهزة للإستخدام. فقط، قم بالبحث عن إسم الخدمة + إسم الـ framework. إذا لم تجد مكتبة متاحه بالفعل، ستجد دائماً API Documentation على موقع الخدمة لخطوات ربط التطبيق بالخدمة.

كل شيء بالنسبة لي ممكن تخيله ماعدا "طرق الدفع".. حينما يختار العميل الوجبات ويضع "شراء او طلب".. كيف اوفر له طرق الدفع الاكترونية باستخدام "الفيزا والماستر كارد او الدفع عند الاستلام" بالاضافة الى اني سوف اعمل على نسختين من التطبيق؟ احدها للعملاء واحدها للمطعم.. بحيث ان نسخة المطعم يوجد فيها admin لاضافة اصناف جديدة مثلا

لو كنت تريد نصائح بخصوص إنشاء تطبيق مطعم عموماً، فأنصحك بـ: تواصل بإستمرار مع صاحب المشروع، وأطلب منه أن يرسل لك التطبيقات التي يفضلها لكي تحاول التعلم منها. إبدأ بالبحث في التطبيقات الموجودة بالفعل على أرض الواقع، وحاول تخيل كيف يعمل كل جزء فيها. لكن، لو كان سؤالك بخصوص نصائح لـ React Native: حاول أن تستخدم الـ native components التي تأتي مع React Native على قدر المستطاع. حاول أن تكسر الـ component إلى components أصغر وأصغر. لا تحاول أن تضع الكثير من الـ logic أو الـ HTML بداخل component واحد. إقرأ الـ source code للمكتبات الكبيرة لـ React Native، وتعلم من طريقة كتابتهم للكود، وطريقة توزيع الملفات. الـ Unit Testing سيساعدك كثيراً. عندما يصبح التطبيق كبيراً، سيكون من الصعب إضافة أو تعديل feature. لهذا، الـ Unit Testing مهم جداً منذ بداية المشروع. لا تحاول أن تبتكر تكنولوجيا جديدة إذا كانت موجودة بالفعل. فمثلاً: يُقدم Tailwind CSS تصميم رائع وسهل الإستخدام، فلا تحاول إنشاء مكتبة CSS لك في المشروع.

لدي مصوفة من المكونات موجودة في state وكنت أريد أن أضيف مكون جديد، لذلك بدأت استخدم الكود التالي: this.state.friends.push(person); this.setState({ friends: this.state.friends }); هل هذه الطريقة صحيحة أم لا؟ أنا أرى أن عمل مصفوفة جديدة ثم إستخدامها للتعديل على state يستهلك أكثر من المطلوب.

إذا قمت بالتعديل مباشرةً على الـ state، لن يقوم React بمعرفة ما حصل. السبب وراء ذلك أنه عند نداء setState، تقوم هذه الدالة أيضاً بإخبار React أن هناك تغير قد حدث، وأن عليه أن يقوم بفحص التطبيق الآن. أيضاً، React يتبع الـ Functional Programming، ومن قواعدها الأساسية هي التعامل مع كل شئ كأنه immutable، أو بمعنى آخر، غير قابل للتعديل. هذا التصميم مفيد جداً، حيث أنه يحافظ على تنظيم الـ state. لهذا السبب، لا يمكنك إستخدام push على الـ array لأنك بهذا الشكل تقوم بالتعديل عليه. ولكن الأفضل هو إستخدام concat لأنها تقوم بدمج الـ array الحالي مع array جديد. أخيراً، بالنسبة للكود الذي كتبته، أنصحك أن تبدأ في إستعمال النسخة الجديدة من React التي لا نستخدم فيها الـ Class Components، ولكن نستخدم الـ Functional Components مع الـ Hooks. مثال: function MyComponent() { const [friends, setFriends] = React.useState([]); const addFriend = friend => setFriends(friends.concat([friend])); return (); }

اتمنى ان تساعدني بحل مشكلتي الصورة المرفقة هي تخطيط اولي للعمل

يبدو انك غير متابع لما صدر أول امس لقد قامت فلاتر بتحديث النسخة وأصبحت فلاتر 2 و هناك الكثير من المشاكل مع البكجات التي لا تتوافق مع نسخة فلاتر 2 , ايضا قامت فلاتر 2 بتعطيل عدة بكجات ربما يكون أحدى البكجات التي تستخدمها من ضمنها. ايضا لا تقلق يمكنك الرجوع إلى إصدار فلاتر السابق إذا لا تريد العمل على إصدار فلاتر 2. كما ويمكنك الرجوع إلى كل بكج على pub.dev و متابعة يبدو أن الكثير من البكجات قامت بتحديث إصداراتها لتناسب فلاتر 2. يمكنك الرجوع هنا و أختيار أي نسخة sdk ويمكنك استخدامها إذا كنت لا تريد فلاتر 2.

عليك ان تستبدل : import { combineReducers } from '../../store/reducers'; بالاتي: import combineReducers from '../../store/reducers';

حسب موقع رياكت الرسمي لا تقم بتعديل this.state بطريقة مباشرة أبدًا، وعليك أن تتعامل معها على أنها غير قابلة للتعديل: وذلك لأن إستخدام التابع push لتعديل this.state قد يسبب أخطاء كثير وقد يؤثر على lifecycle hooks حيث أن دوال مثل componentDidUpdate لن تعرف أنه قد تم تعديل الحالة state، بينما الطريقة الأفضل هي إستخدام دالة لتعديل الحالة state كالتالي: this.setState(prevState => ({ firends: [...prevState.firends, person] })) يمكنك أيضًا إستعمال التابع concat لجعل الكود أكثر سهولة وقابل للقراءة أكثر: this.setState({ firends: this.state.firends.concat([person]) })

لا تسمح PHP بعمل import لدالة من ملف. إذا قمت بإستخدام require أو include، ستقوم بطلب كل شئ في الملف. ولكن، يمكنك إستخدام الـ namespaces لعمل encapsulation أو تغليف للدالة التي تم تحميلها. أولاً، سنعرّف دالة بسيطة (create_button) في ملف يسمى functions.php. وسنستخدم الـ namespace بداخل الملف كـ App\Functions. وبعدها، سنقوم بعمل لها require بداخل ملف جديد يسمى index.php وسنقوم بنداء الدالة بإستخدام الـ namespace تبعها كـ App\Functions\create_button.

مرحباً @Adam Ebrahim يمكنك فعل هذا باستخدام طريقتين: استخدام ال props وأن توفر دالة من ال parent لل child كما في التعليقات السابقة. استخدام ال 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> ); } }

لا توجد طريقة لتمرير 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> ); }

هل يمكنك إخبارنا لماذا تريد تمرير 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 من مكون ابن إلى المكون الأب، ولذلك لأن المكون الأب لديه بالفعل هذه الـ 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) المصدر: Refs and the DOM