React.js satır içi stil en iyi uygulamalar

SORU

12 Kasım 2014, ÇARŞAMBA

React.js satır içi stil en iyi uygulamalar

Sınıflar Tepki, bu gibi içinde: stiller belirleyebilirsiniz farkında değilim

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

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

Tüm tasarım bu şekilde bunu hedefliyor olmalı, ve tüm CSS dosyasında belirtilen herhangi bir stil var mı?

Ya da satır içi stilleri tamamen kaçınmak gerekir?

Garip ve dağınık hem de biraz işe yarıyor. - iki yerde verdiği şekillendirme zaman kontrol edilmesi gerekir.

CEVAP

26 Temmuz 2015, Pazar

"Uygulamalar" henüz. İyi bir yeri yok Satır içi stilleri kullanan bizler, bileşenleri Tepki için hala çok çalışıyoruz.

Çılgınca değişen yaklaşımlar vardır: React inline-style lib comparison chart

Ya hep ya hiç?

"Stil" aslında epeyce bir kavram içerir: . olarak biz ne başvurun

Düzen —başkalarıyla ilişki içinde nasıl göründüğünü
Görünüm —bir elementin özelliklerini bileşen/
Davranış ve devletbelirli bir devlet içinde nasıl göründüğünü

Devlet stilleri ile başlar

Tepki zaten bileşenlerin durumunu yönetiyor, bu stilleri yaparve davranış durumubileşen mantığı ile çalışması için doğal bir uyum.

Bileşenleri koşullu ile işlemek için inşa etmek yerine devlet-sınıflar, devlet stilleri ekleme doğrudan göz önünde bulundurun:

// 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 : {}} />

Tarzı bir sınıf kullanıyoruz olduğumuzu unutmayıngörünümama artık .is- herhangi birini kullanarak sınıf önekive davranış durumu.

Object.assign (ES6) veya _.extend (/çizgi lodash) birden çok durum için destek eklemek için kullanabiliriz:

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

Özelleştirme ve yeniden kullanılabilirliği

Object.assign kullanıyoruz şimdi çok basit bizim bileşeni farklı stilleri ile yeniden kullanılabilir hale geliyor. Eğer varsayılan stilleri geçersiz kılmak istiyorsak, yani sahne ile arama-site de yapabiliriz, şu şekilde: <TodoItem dueStyle={ fontWeight: "bold" } />. Uygulanan bu gibi:

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

Düzen

Şahsen, düzen stilleri satır içi için zorlayıcı bir neden göremiyorum. Büyük CSS düzeni sistemleri bir dizi vardır. Sadece birini kullanmak istiyorum.

O dedi, doğrudan bileşen düzeni stilleri eklemek yok. Düzen bileşenleri ile bileşenleri sarın. İşte size bir örnek.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 class="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>

Düzeni desteklemek için, sık sık100%18* * ve yükseklik bileşenleri için tasarım çalışın.

Görünüm

Bu en ihtilaflı bölge "satıriçi stil" tartışması. Sonuçta, bu bileşen için tasarım ve JavaScript ile takımı rahatlatıyor.

Kesin olan bir şey var, bir kütüphane yardımı gerekir. Tarayıcı Birleşik Devletleri (:hover, :focus) ve medya sorguları acı Tepki ham.

Bu sabit parçalar için sözdizimi ŞIMARIKLIK bu model için tasarlandığından Radium severim.

Kod organizasyonu

Sık sık bir stil modülü dışında bir nesne göreceksiniz. Yapılacaklar listesi bir bileşen için, bu gibi bir şey olabilir:

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

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

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

alıcı fonksiyonları

Şablon stil mantık bir sürü ekleyerek biraz dağınık yukarıda görüldüğü gibi). Alıcı işlevlerini stilleri hesaplamak için oluşturmak istiyorum:

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>
  }
});