Props ile stil
- React kursu
- Başlangıç
- Ders 58/84
- 4 dk
Bir styled bileşene prop geçip stili değiştirmeyi öğrenirsin.
Props ile stil
styled-components bileşenleri props alabilir. Şablon içinde ${props => props.color} ile props'a göre dinamik değer üretirsin.
Böylece <Btn color="red" /> yazınca düğme kırmızı olur. Aynı bileşen farklı props ile farklı renklerde çalışır.
Bu, bileşenlerin yeniden kullanılabilir ve esnek olmasını sağlar. Tek bir düğme bileşeni farklı renk ve boyutlarda onlarca yerde çalışır; bu da kod tekrarını ciddi biçimde azaltır.
Koşullu stil
Props'a göre stilleri koşullu da yazabilirsin: ${props => props.primary ? "blue" : "gray"}. Böylece tek bileşen hem birincil hem ikincil düğme olur.
Bu, çok sayıda sınıf adı yazmaktan kurtarır; mantık tek yerde toplanır.
İleride tema ile renkleri merkezi yapacağız; şimdilik props yeter.
Uygulama Renkli düğme
Aşağıdaki iskeleti tamamla. ColorButton adında stilli bileşen oluştur; styled.button\`color: ${props => props.color};\` ile tanımla. <ColorButton color="green">Tamam</ColorButton> döndür. Dışa aktar.
Başlangıç kodu
// ColorButton bileşenini buraya tanımlaÖrnek çözüm
const ColorButton = styled.button`color: ${props => props.color};`;
function App() { return <ColorButton color="green">Tamam</ColorButton>; }
export default ColorButton;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Şablon içinde props'a nasıl erişilir?
A dynamic value is made with a function inside ${}.- ${props.x}
- this.props.x
- props.x
- ${props => props.x} Doğru cevap
Açıklama: ${} içinde fonksiyon ile props okunur.
2 Props ile stil: eksik parçayı tamamla
color: ${props => props.____};color: ${props => props.color};Açıklama: props.color ile rengi okudun.
3 Props ile stil: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
${props => ...} |
Dinamik değer |
color="red" |
Prop geçme |
props.primary ? |
Koşul |
<Btn /> |
Kullanım |