css - أفضل ممارسات أسلوب مضمنة React.js




reactjs inline-styles react-jsx (11)

أنا على دراية بأنه يمكنك تحديد أنماط داخل فئات React ، مثل هذا:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

هل يجب أن أهدف إلى القيام بكل هذا الأسلوب بهذه الطريقة ، وليس لدي أي أنماط على الإطلاق في ملف CSS الخاص بي؟

أو يجب أن أتجنب الأنماط المضمنة تمامًا؟

يبدو من الغريب والفوضى أن تفعل قليلا على حد سواء - سوف تحتاج إلى التحقق من مكانين عند التغيير والتبديل في التصميم.


Answers

لا يوجد الكثير من "أفضل الممارسات" حتى الآن. أولئك الذين يستخدمون الأنماط الداخلية ، لمكونات React ، ما زالوا يجرون تجارب كثيرة.

هناك عدد من المقاربات التي تتنوع بشكل هائل: تفاعل مع الرسم البياني لمقارنة أسعار الفائدة

كل شيء أم لا؟

ما نشير إليه باسم "أسلوب" يتضمن في الواقع عددًا قليلًا من المفاهيم:

  • تخطيط - كيف يبدو العنصر / المكوّن في علاقة بالآخرين
  • المظهر - خصائص عنصر / مكون
  • السلوك والحالة - كيف يبدو العنصر / المكوّن في حالة معينة

تبدأ مع أنماط الدولة

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

بدلاً من إنشاء مكونات لتقديمها مع فئات الحالة الشرطية ، فكر في إضافة أنماط الحالة مباشرةً:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

لاحظ أننا نستخدم فصلًا إلى مظهر النمط ولكن لم يعد يستخدم أي فئة من .is- للحالة والسلوك .

يمكننا استخدام Object.assign (ES6) أو _.extend (تسطير أسفل / lodash) لإضافة دعم لحالات متعددة:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

التخصيص وإعادة الاستخدام

الآن نحن نستخدم Object.assign يصبح من السهل جدًا جعل Object.assign القابل لإعادة الاستخدام مع أنماط مختلفة. إذا أردنا تجاوز الأنماط الافتراضية ، فيمكننا إجراء ذلك في موقع المكالمة باستخدام <TodoItem dueStyle={ fontWeight: "bold" } /> ، مثل: <TodoItem dueStyle={ fontWeight: "bold" } /> . نفذت على هذا النحو:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

نسق

أنا شخصياً لا أرى سبباً مقنعاً لتضمين أنماط التخطيط. هناك عدد كبير من أنظمة تخطيط CSS الرائعة. كنت مجرد استخدام واحد.

ومع ذلك ، لا تضف أنماط التخطيط مباشرة إلى المكون الخاص بك. التفاف المكونات الخاصة بك مع مكونات التخطيط. وهنا مثال على ذلك.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

بالنسبة إلى دعم التخطيط ، غالباً ما أحاول تصميم المكونات لتكون width 100% height .

مظهر خارجي

هذا هو المجال الأكثر إثارة للجدل في الجدل "على غرار مضمنة". في النهاية ، الأمر متروك للعنصر الخاص بك تصميم وراحة فريقك مع جافا سكريبت.

شيء واحد مؤكد ، ستحتاج إلى مساعدة من مكتبة. حالات المستعرض ( :hover ، :focus ) ، واستعلامات الوسائط مؤلمة في رد الفعل الخام.

أنا أحب Radium لأنه تم تصميم بناء الجملة لهذه الأجزاء الصلبة لنموذج ذلك من SASS.

تنظيم الرموز

في كثير من الأحيان سترى كائن نمط خارج الوحدة. بالنسبة إلى مكون قائمة تودو ، قد يبدو الأمر كالتالي:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

وظائف الثرية

يمكن أن تؤدي إضافة مجموعة من منطق الأسلوب إلى القالب إلى بعض الفوضى (كما هو موضح أعلاه). أحب إنشاء وظائف getter لحساب الأنماط:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

مزيد من المشاهدة

لقد ناقشت كل ذلك بمزيد من التفصيل في React Europe في وقت سابق من هذا العام: Inline Styles وعندما يكون من الأفضل "استخدام CSS فقط" .

يسعدني تقديم المساعدة بينما تقوم بعمل اكتشافات جديدة على طول الطريق :) ضربني -> @chantastic


يعتمد الأمر فعلاً على حجم الطلب ، إذا كنت تريد استخدام برامج التجميع مثل webpack وحزمة CSS و JS معًا في البنية وكيف تريد إدارة تدفق تطبيقاتك! في نهاية اليوم ، يعتمد على وضعك ، يمكنك اتخاذ القرار!

إن تفضيلاتي لتنظيم الملفات في المشاريع الكبيرة هي فصل ملفات CSS و JS ، فقد يكون من الأسهل مشاركتها ، وأسهل على مستخدمي واجهة المستخدم فقط المرور عبر ملفات CSS ، وكذلك تنظيم ملفات أكثر تطوراً للتطبيق بأكمله!

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

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

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

اعتمادا على التصميم الخاص بك التكوين يمكن أن تقدم لك إعادة تحميل الساخن. يتم إعادة عرض صفحة الويب فورًا في كل مرة يتغير فيها النمط. هذا يساعدني على تطوير المكونات بشكل أسرع. بعد أن قلت ذلك ، أنا متأكد من أنه يمكنك إعداد بيئة إعادة تحميل Hot لـ CSS + SCSS.


بالنسبة لبعض المكونات ، من الأسهل استخدام الأنماط المضمنة. أيضا ، أجد أنه أسهل وأكثر إيجازا (وأنا أستخدم جافا سكريبت وليس CSS) لتحريك أنماط المكونات.

بالنسبة للمكونات المستقلة ، أستخدم "Spread Operator" أو "...". بالنسبة لي ، الأمر واضح وجميل ويعمل في مساحة ضيقة. إليك بعض التحميلات المتحركة التي أجريتها لعرض فوائدها:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

ثم ، في componentWillMount () ، أقوم بتعيين فاصل زمني مثل ذلك ...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.push(color);
  }

  opacity['opacity'] < 1 ? opacity['opacity']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

الغرض الرئيسي من سمة النمط هو الأنماط الديناميكية القائمة على الحالة. على سبيل المثال ، يمكن أن يكون لديك نمط عرض على شريط تقدم قائم على حالة معينة ، أو الموضع أو الرؤية استنادًا إلى شيء آخر.

تفرض الأنماط في JS القيد بأن التطبيق لا يمكنه توفير تصميم مخصص لمكون قابل لإعادة الاستخدام. هذا مقبول تماما في الحالات المذكورة أعلاه ، ولكن ليس عند تغيير الخصائص المرئية ، وخاصة اللون.


تتوقع سمة النمط في React أن تكون القيمة كائنًا ، أي زوج القيمة الأساسية.

سيحتوي style = {} على كائن آخر بداخله مثل {float:'right'} لتشغيله.

<span style={{float:'right'}}>{'Download Audit'}</span>

أتمنى هذا يصلح المشكلة


لدي عادة ملف scss مرتبط بكل مكون React. لكني لا أرى سبباً يجعلك لا تغلف العنصر بمنطقه وتنظر فيه. أعني ، لديك شيء مماثل مع مكونات الويب.


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

لم أكن مقتنعا في البداية ولكن بعد أن أدخلت في عدة أشهر ، وأنا أقوم بتحويل كامل وأنا في طور تحويل كل CSS إلى مضمنة أو غيرها من أساليب css التي تعتمد على JS.

هذا العرض التقديمي الذي قدمه موظف الفيسبوك ومساهم React "vjeux" مفيد حقًا أيضًا - https://speakerdeck.com/vjeux/react-css-in-js


يمكنك استخدام StrCSS كذلك ، فإنه ينشئ أسماء الفئات المعزولة وأكثر من ذلك بكثير! قد يبدو رمز المثال. يمكنك (اختياري) تثبيت ملحق VSCode من Visual Studio Marketplace لتسليط الضوء على بناء الجملة!

المصدر: https://github.com/jeffreylanters/strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

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

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

وفي الملف "custom-component.css" ، سيبدأ كل إدخال بعلامة المكون المخصص:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

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


إجابة مرئية

تخيل عنصر <span> داخل <div> . إذا كنت تمنح العنصر <span> ارتفاعًا قدره 100 بكسل وحدود حمراء على سبيل المثال ، فسيبدو مثل هذا مع

عرض: مضمنة

عرض: مضمنة كتلة

العرض محجوب

الرمز: http://jsfiddle.net/Mta2b/

العناصر التي تحتوي على display:inline-block تشبه display:inline عناصر display:inline ، ولكن يمكن أن يكون لها عرض وارتفاع . وهذا يعني أنه يمكنك استخدام عنصر حظر مضمّن ككتلة أثناء تدفقها داخل النص أو عناصر أخرى.

اختلاف الأنماط المدعومة كملخص:

  • مضمنة : فقط margin-left ، margin-right ، padding-left ، padding-right
  • مضمنة كتلة : margin ، padding ، height ، width






css reactjs inline-styles react-jsx