الفرق بين المراجعتين لصفحة: «React/lifting state up»
< React
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:رفع الحالات المشتركة للمستوى الأعلى}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:رفع الحالات المشتركة للمستوى الأعلى}}</noinclude> | <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> مع تزويده بدرجة الحرارة التي أدخلها المستخدم: | |||
مراجعة 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 مع تزويده بدرجة الحرارة التي أدخلها المستخدم: