استدعاء الدوال في JSX
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 9 من 42.
بما أن الأقواس المعقوفة تقبل أي تعبير، فهي تقبل أيضًا استدعاءات الدوال (function calls). قم بتعريف دالة مساعدة فوق المكون واستدعها مباشرة داخل الوسوم:
function shout(text) {
return text.toUpperCase() + '!';
}
export default function App() {
return <h1>{shout('hello')}</h1>;
// يعرض: HELLO!
}هذا يحافظ على قابلية قراءة المكونات: يحدد التنسيق ما الذي يظهر، وتحدد الدوال المساعدة كيفية حسابه. تعمل طرق النصوص (String methods) بشكل مباشر أيضاً:
<p>{name.toUpperCase()}</p>
التحدي
سهلالدالة المساعدة fullName تقوم ببناء اسم للعرض من جزأين، ولكن لا أحد يستدعيها.
- اجعل الفقرة التي تحمل
id="author"تعرض نتيجة استدعاءfullName('Grace', 'Hopper'): يجب أن تعرضGrace Hopper.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة