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
"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>
}
});
Daha fazla izliyor
Ben Tepki daha ayrıntılı Avrupa'da tüm bunlar bu yıl daha önce açıklanan: Inline Styles and when it's best to 'just use CSS'.
Yol boyunca yeni keşifler yaparken yardım ettiğim için çok mutluyum :) beni Vur ->@chantastic
Node.js uygulamalar için kodlama Stil ...
Nasıl javascript ile tüm satır içi sti...
Nasıl Emacs bir yeni satır ile bir kar...
Nasıl birden fazla satır grep kullanar...
Nasıl bir tablo hücre (tek hücre) bir ...