الفرق بين المراجعتين لصفحة: «React/forwarding refs»

مراجعة 10:40، 24 أغسطس 2018

تمرير المراجع هو تقنية لتمرير مرجع ref تلقائيًّا من مكوّن إلى عناصره الأبناء. لا يكون هذا ضروريًّا بشكل نموذجي لمعظم مكوّنات التطبيق، ولكن قد يكون مفيدًا لبعض أنواع المكوّنات، خاصّة مكتبات المكوّنات القابلة لإعادة الاستخدام. سنتحدث في هذه الصفحة عن أشيع الحالات التي نحتاج فيها تمرير المراجع.

تمرير المراجع إلى مكونات DOM

فلنأخذ مثال عن المكوّن FancyButton والذي يُصيِّر زر button في DOM:

function FancyButton(props) {
  return (
    <button className="FancyButton">
      {props.children}
    </button>
  );
}

تُخفي مكوّنات React تفاصيلها التنفيذية، بما في ذلك الناتج المُصيَّر. لا تحتاج المكوّنات الأخرى التي تستخدم المكوّن FancyButton عادةً إلى الحصول على مرجع ref لعنصر الزر button الداخلي. يكون هذا جيّدًا لأنّه يمنع المكوّنات من الاعتماد كثيرًا على بنية DOM للمكوّنات الأخرى.

قد يكون مثل هذا التغليف مرغوبًا في مكوّنات التطبيق مثل FeedStory أو Comment، ولكنّه قد يكون غير ملائم بالنسبة للمكوّنات القابلة لإعادة الاستخدام بكثرة مثل FancyButton أو MyTextInput. تميل هذه المكوّنات لاستخدامها عبر التطبيق بنفس الطريقة مثل الزر button وحقل الإدخال input في DOM، وقد يكون الوصول إلى عقد DOM الخاصّة بها أمرًا لا بُدّ منه لإدارة التركيز، أو الاختيار، أو التحريكات.

تمرير المراجع هو عبارة عن ميزة تسمح لبعض المكوّنات باستقبال مرجع ref وتمريره إلى المستويات الأدنى إلى المكوّنات الأبناء.

يستخدم المكوّن FancyButton في المثال التالي React.forwardRef للحصول على المرجع ref المُمرَّر له، ومن ثمّ يُمرِّره إلى الزر button الذي يُصيِّره:

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:تمرير المراجع}}</noinclude>
+تمرير المراجع هو تقنية لتمرير مرجع <code>ref</code> تلقائيًّا من مكوّن إلى عناصره الأبناء. لا يكون هذا ضروريًّا بشكل نموذجي لمعظم مكوّنات التطبيق، ولكن قد يكون مفيدًا لبعض أنواع المكوّنات، خاصّة مكتبات المكوّنات القابلة لإعادة الاستخدام. سنتحدث في هذه الصفحة عن أشيع الحالات التي نحتاج فيها تمرير المراجع.
+== تمرير المراجع إلى مكونات DOM ==
+فلنأخذ مثال عن المكوّن <code>FancyButton</code> والذي يُصيِّر زر <code>button</code> في DOM:<syntaxhighlight lang="javascript">
+function FancyButton(props) {
+  return (
+    <button className="FancyButton">
+      {props.children}
+    </button>
+  );
+}
+</syntaxhighlight>تُخفي مكوّنات React تفاصيلها التنفيذية، بما في ذلك الناتج المُصيَّر. لا تحتاج المكوّنات الأخرى التي تستخدم المكوّن <code>FancyButton</code> عادةً إلى الحصول على مرجع <code>ref</code> لعنصر الزر <code>button</code> الداخلي. يكون هذا جيّدًا لأنّه يمنع المكوّنات من الاعتماد كثيرًا على بنية DOM للمكوّنات الأخرى.
+قد يكون مثل هذا التغليف مرغوبًا في مكوّنات التطبيق مثل <code>FeedStory</code> أو <code>Comment</code>، ولكنّه قد يكون غير ملائم بالنسبة للمكوّنات القابلة لإعادة الاستخدام بكثرة مثل <code>FancyButton</code> أو <code>MyTextInput</code>. تميل هذه المكوّنات لاستخدامها عبر التطبيق بنفس الطريقة مثل الزر <code>button</code> وحقل الإدخال <code>input</code> في DOM، وقد يكون الوصول إلى عقد DOM الخاصّة بها أمرًا لا بُدّ منه لإدارة التركيز، أو الاختيار، أو التحريكات.
+تمرير المراجع هو عبارة عن ميزة تسمح لبعض المكوّنات باستقبال مرجع <code>ref</code> وتمريره إلى المستويات الأدنى إلى المكوّنات الأبناء.
+يستخدم المكوّن <code>FancyButton</code> في المثال التالي <code>React.forwardRef</code> للحصول على المرجع <code>ref</code> المُمرَّر له، ومن ثمّ يُمرِّره إلى الزر <code>button</code> الذي يُصيِّره: