النمط المضمن في رد الفعل - البرنامج التعليمي REACTJS

مقدمة

في مشاريع الواجهة الأمامية التي نادرًا ما تتطلب تطبيقًا من صفحة واحدة، غالبًا ما يتم وضع الأنماط المضمنة لعناصر DOM في ملف العنصر المستهدف >' السمة.

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

مكونات التصميم في React

ربما تكون على دراية بالطريقة المعتادة لتصميم مكونات React باستخدام السمة classname بالتزامن مع ورقة أنماط خارجية:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

com.jsx

 paragraph-text{ font-weight: bold; color: beige; }

CSS

الأنماط المضمنة

الحصول على نفس النتيجة باستخدام الأنماط المضمنة يعمل بشكل مختلف تمامًا. لاستخدام الأنماط المضمّنة في React، استخدم سمة النمط، التي تقبل كائن JavaScript بخصائص الجمل. مثال:

 function MyComponent(){ return Inline Styled Component }

لاحظ أن قيمة الحشو لا تحتوي على وحدة لأن React تضيف وحدة 'بكسل لاحقة لبعض خصائص النمط الرقمي المضمن. في الحالات التي تحتاج فيها إلى استخدام وحدات أخرى، مثل 'em' أو 'rem'، حدد بوضوح الوحدة ذات القيمة كسلسلة. تطبيق هذا على خاصية الحشو يجب أن يكون الحشو: '1.5م' .

كما أن هذه الأنماط لا تكون مسبوقة ببادئة البائع تلقائيًا، لذا يتعين عليك إضافة بادئات البائع يدويًا.

تحسين إمكانية القراءة

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

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

com.jsx

بناء مكون البطاقة

دعونا نبني مكون بطاقة المستخدم.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

بحكم التجربة

تنتقد وثائق React الرسمية استخدام التصميم المضمن كوسيلة أساسية لمشاريع التصميم وتوصي باستخدام السمة className بدلاً من ذلك.

ملاحظة: تستخدم بعض الأمثلة في الوثائق نمطًا من أجل الملاءمة، ولكن لا يُنصح عمومًا باستخدام سمة النمط كوسيلة أساسية لعناصر التصميم.

في معظم الحالات، اسم الفصل يجب أن تشير s إلى الفئات المحددة في ورقة أنماط CSS خارجية. تُستخدم الأنماط غالبًا في تطبيقات React لإضافة أنماط محسوبة ديناميكيًا في وقت العرض.