الفرق بين المراجعتين ل"React/lifting state up"

مراجعة 09:33، 21 يوليو 2018

عادةً ما تحتاج المُكوِّنات المُتعدِّدة إلى أن تعكس نفس البيانات المتغيّرة. نُوصي برفع الحالة المشتركة بينها إلى أقرب عنصر أب مشترك بينها، فلنشاهد كيف يُمكِن تطبيق ذلك عمليًّا.

في هذا القسم سنُنشِئ آلة حاسبة للحرارة والتي تحسب إن كان الماء سيغلي في الدرجة المُعطاة.

سنبدأ بمُكوِّن يُدعى BoilingVerdict، والذي يقبل درجة الحرارة بالسيلزيوس celsius كخاصيّة props له، ويطبع إن كانت هذه الدرجة كافية لغلي الماء:

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>سيغلي الماء.</p>;
  }
  return <p>لن يغلي الماء.</p>;
}

سنُنشِئ الآن مُكوِّن الآلة الحاسبة Calculator، والذي يُصيِّر حقل إدخال <input> يُتيح لنا إدخال درجة الحرارة ويحتفظ بقيمتها في this.state.temperature. يُصيِّر هذا المُكوِّن أيضًا المُكوِّن BoilingVerdict مع تزويده بدرجة الحرارة التي أدخلها المستخدم:

الفرق بين المراجعتين ل"React/lifting state up"

مراجعة 09:33، 21 يوليو 2018

قائمة التصفح

بحث

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:رفع الحالات المشتركة للمستوى الأعلى}}</noinclude>
+عادةً ما تحتاج المُكوِّنات المُتعدِّدة إلى أن تعكس نفس البيانات المتغيّرة. نُوصي برفع الحالة المشتركة بينها إلى أقرب عنصر أب مشترك بينها، فلنشاهد كيف يُمكِن تطبيق ذلك عمليًّا.
+في هذا القسم سنُنشِئ آلة حاسبة للحرارة والتي تحسب إن كان الماء سيغلي في الدرجة المُعطاة.
+سنبدأ بمُكوِّن يُدعى <code>BoilingVerdict</code>، والذي يقبل درجة الحرارة بالسيلزيوس <code>celsius</code> كخاصيّة <code>props</code> له، ويطبع إن كانت هذه الدرجة كافية لغلي الماء:<syntaxhighlight lang="javascript">
+function BoilingVerdict(props) {
+  if (props.celsius >= 100) {
+    return <p>سيغلي الماء.</p>;
+  }
+  return <p>لن يغلي الماء.</p>;
+}
+</syntaxhighlight>سنُنشِئ الآن مُكوِّن الآلة الحاسبة <code>Calculator</code>، والذي يُصيِّر حقل إدخال <code>[[HTML/input|<input>]]</code> يُتيح لنا إدخال درجة الحرارة ويحتفظ بقيمتها في <code>this.state.temperature</code>. يُصيِّر هذا المُكوِّن أيضًا المُكوِّن <code>BoilingVerdict</code> مع تزويده بدرجة الحرارة التي أدخلها المستخدم: