الفرق بين المراجعتين لصفحة: «React/faq styling»
تحديث |
|||
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
سطر 24: | سطر 24: | ||
== ماذا يعني المصطلح <code>CSS-in-JS</code>؟ == | == ماذا يعني المصطلح <code>CSS-in-JS</code>؟ == | ||
يُشير المصطلح <code>CSS-in-JS</code> إلى النمط الذي تُركَّب فيه CSS باستخدام JavaScript بدلًا من تعريفها في الملفّات الخارجيّة | يُشير المصطلح <code>CSS-in-JS</code> إلى النمط الذي تُركَّب فيه CSS باستخدام JavaScript بدلًا من تعريفها في الملفّات الخارجيّة. | ||
لاحظ أنّ هذه الوظيفة ليست جزءًا من React ولكن تُزوّدنا بها مكتبات الطرف الثالث. ليس هناك رأي محدّد لمكتبة React حول كيفيّة تعريف التنسيقات. إن كنت مترددًا فأفضل نقطة للبدء هي تعريف تنسيقاتك في ملف <code>*.css</code> منفصل كالعادة والإشارة إليها باستخدام الخاصيّة <code>[[React/dom elements#className|className]]</code>. | لاحظ أنّ هذه الوظيفة ليست جزءًا من React ولكن تُزوّدنا بها مكتبات الطرف الثالث. ليس هناك رأي محدّد لمكتبة React حول كيفيّة تعريف التنسيقات. إن كنت مترددًا فأفضل نقطة للبدء هي تعريف تنسيقاتك في ملف <code>*.css</code> منفصل كالعادة والإشارة إليها باستخدام الخاصيّة <code>[[React/dom elements#className|className]]</code>. | ||
== هل بإمكاني إجراء تحريك في React؟ == | == هل بإمكاني إجراء تحريك في React؟ == | ||
يُمكِن استخدام React لدعم التحريك. انظر إلى مكتبة [https://reactcommunity.org/react-transition-group/ React Transition Group] ومكتبة [https://github.com/chenglou/react-motion React Motion] على سبيل المثال. | يُمكِن استخدام React لدعم التحريك. انظر إلى مكتبة [https://reactcommunity.org/react-transition-group/ React Transition Group] ومكتبة [https://github.com/chenglou/react-motion React Motion] أو [https://github.com/react-spring/react-spring React Spring] على سبيل المثال. | ||
== انظر أيضًا == | == انظر أيضًا == | ||
سطر 37: | سطر 37: | ||
* [[React/faq functions|تمرير الدوال إلى المكونات]] | * [[React/faq functions|تمرير الدوال إلى المكونات]] | ||
* [[React/faq state|حالة المكونات]] | * [[React/faq state|حالة المكونات]] | ||
* [[React/faq structure|بنية ملفات المشروع]] | * [[React/faq structure|بنية ملفات المشروع]] | ||
* [[React/faq versioning|سياسة الإصدارات المتبعة في React]] | |||
* [[React/faq internals|DOM الافتراضي والكائنات الداخلية]] | * [[React/faq internals|DOM الافتراضي والكائنات الداخلية]] | ||
==مصادر== | ==مصادر== | ||
*[https://reactjs.org/docs/faq-styling.html صفحة التنسيق واستخدام CSS مع React في توثيق React الرسمي]. | *[https://reactjs.org/docs/faq-styling.html صفحة التنسيق واستخدام CSS مع React في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
[[تصنيف:React FAQ]] |
المراجعة الحالية بتاريخ 10:06، 7 نوفمبر 2020
كيف أُضيف أصناف CSS إلى المكوّنات؟
مرِّر سلسلة نصيّة إلى خاصيّة اسم الصنف className
:
render() {
return <span className="menu navigation-menu">القائمة</span>
}
من الشائع أن تعتمد أصناف CSS على خاصيّات أو حالة المكوّنات:
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>القائمة</span>
}
إن وجدت نفسك تكتب شيفرة مثل هذه، فتستطيع الحزمة classnames
تبسيطها لك.
هل أستطيع استخدام التنسيقات السطرية (inline)؟
نعم، انظر إلى هذا التوثيق حول التنسيق من هنا.
هل التنسيقات السطرية سيئة؟
تكون أصناف CSS أفضل بشكل عام للأداء من التنسيقات السطرية.
ماذا يعني المصطلح CSS-in-JS
؟
يُشير المصطلح CSS-in-JS
إلى النمط الذي تُركَّب فيه CSS باستخدام JavaScript بدلًا من تعريفها في الملفّات الخارجيّة.
لاحظ أنّ هذه الوظيفة ليست جزءًا من React ولكن تُزوّدنا بها مكتبات الطرف الثالث. ليس هناك رأي محدّد لمكتبة React حول كيفيّة تعريف التنسيقات. إن كنت مترددًا فأفضل نقطة للبدء هي تعريف تنسيقاتك في ملف *.css
منفصل كالعادة والإشارة إليها باستخدام الخاصيّة className
.
هل بإمكاني إجراء تحريك في React؟
يُمكِن استخدام React لدعم التحريك. انظر إلى مكتبة React Transition Group ومكتبة React Motion أو React Spring على سبيل المثال.
انظر أيضًا
- المصطلحات
- استخدام AJAX مع React
- أسئلة حول Babel، و JSX، وخطوات بناء التطبيقات
- تمرير الدوال إلى المكونات
- حالة المكونات
- بنية ملفات المشروع
- سياسة الإصدارات المتبعة في React
- DOM الافتراضي والكائنات الداخلية