الفرق بين المراجعتين ل"React/faq styling"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التنسيق واستخدام CSS مع React}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التنسيق واستخدام CSS مع React}}</noinclude> | <noinclude>{{DISPLAYTITLE:التنسيق واستخدام CSS مع React}}</noinclude> | ||
| + | |||
| + | == كيف أُضيف أصناف CSS إلى المكوّنات؟ == | ||
| + | مرِّر سلسلة نصيّة إلى خاصيّة اسم الصنف <code>className</code>:<syntaxhighlight lang="javascript"> | ||
| + | render() { | ||
| + | return <span className="menu navigation-menu">القائمة</span> | ||
| + | } | ||
| + | |||
| + | </syntaxhighlight>من الشائع أن تعتمد أصناف CSS على خاصيّات أو حالة المكوّنات:<syntaxhighlight lang="javascript"> | ||
| + | render() { | ||
| + | let className = 'menu'; | ||
| + | if (this.props.isActive) { | ||
| + | className += ' menu-active'; | ||
| + | } | ||
| + | return <span className={className}>القائمة</span> | ||
| + | } | ||
| + | |||
| + | </syntaxhighlight>إن وجدت نفسك تكتب شيفرة مثل هذه، فتستطيع الحزمة <code>[https://www.npmjs.com/package/classnames classnames]</code> تبسيطها لك. | ||
| + | |||
| + | == هل أستطيع استخدام التنسيقات السطرية (inline)؟ == | ||
| + | نعم، انظر إلى هذا التوثيق حول التنسيق [[React/dom elements#style|من هنا]]. | ||
| + | |||
| + | == هل التنسيقات السطرية سيئة؟ == | ||
| + | تكون أصناف CSS أفضل بشكل عام للأداء من التنسيقات السطرية. | ||
| + | |||
| + | == ماذا يعني المصطلح <code>CSS-in-JS</code>؟ == | ||
| + | يُشير المصطلح <code>CSS-in-JS</code> إلى النمط الذي تُركَّب فيه CSS باستخدام JavaScript بدلًا من تعريفها في الملفّات الخارجيّة. اقرأ [https://github.com/MicheleBertoli/css-in-js من هنا] مقارنة بين مكتبات <code>CSS-in-JS</code>. | ||
| + | |||
| + | لاحظ أنّ هذه الوظيفة ليست جزءًا من React ولكن تُزوّدنا بها مكتبات الطرف الثالث. ليس هناك رأي محدّد لمكتبة React حول كيفيّة تعريف التنسيقات. إن كنت مترددًا فأفضل نقطة للبدء هي تعريف تنسيقاتك في ملف <code>*.css</code> منفصل كالعادة والإشارة إليها باستخدام الخاصيّة <code>[[React/dom elements#className|className]]</code>. | ||
| + | |||
| + | == هل بإمكاني إجراء تحريك في React؟ == | ||
| + | يُمكِن استخدام React لدعم التحريك. انظر إلى مكتبة [https://reactcommunity.org/react-transition-group/ React Transition Group] ومكتبة [https://github.com/chenglou/react-motion React Motion] على سبيل المثال. | ||
| + | |||
| + | ==مصادر== | ||
| + | *[https://reactjs.org/docs/faq-styling.html صفحة التنسيق واستخدام CSS مع React في توثيق React الرسمي]. | ||
| + | [[تصنيف:React]] | ||
مراجعة 10:03، 12 سبتمبر 2018
كيف أُضيف أصناف 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 بدلًا من تعريفها في الملفّات الخارجيّة. اقرأ من هنا مقارنة بين مكتبات CSS-in-JS.
لاحظ أنّ هذه الوظيفة ليست جزءًا من React ولكن تُزوّدنا بها مكتبات الطرف الثالث. ليس هناك رأي محدّد لمكتبة React حول كيفيّة تعريف التنسيقات. إن كنت مترددًا فأفضل نقطة للبدء هي تعريف تنسيقاتك في ملف *.css منفصل كالعادة والإشارة إليها باستخدام الخاصيّة className.
هل بإمكاني إجراء تحريك في React؟
يُمكِن استخدام React لدعم التحريك. انظر إلى مكتبة React Transition Group ومكتبة React Motion على سبيل المثال.