Meydan okuma: Hava durumu kartı

Bir şehir adı prop alıp sıcaklık ve durum gösteren bileşeni yazarsın.

Meydan okuma: Hava durumu kartı

Bu meydan okuma, WeatherCard bileşenini yazmanı istiyor. city, temp ve condition olmak üzere üç prop alsın. Hava çok soğuksa (temp < 0) kart arka planı mavi, değilse türüncü olsun.

className'i ternary ile belirle: temp < 0 ? "cold" : "warm". İçerikte <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p> ve <p>{ '{ condition }' }</p> göster.

Props destructuring ve koşullu render'ı birleştirme zamanı. İpucu az; öğrendiklerini uygula.

Uygulama WeatherCard yaz

Aşağıdaki iskeleti tamamla. WeatherCard bileşeni yaz. ({ '{ city, temp, condition }' }) parametresi alsın. <div className={ '{ temp < 0 ? "cold" : "warm" }' }> ile kök div'i oluştur. İçinde <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p> ve <p>{ '{ condition }' }</p> olsun. Dışa aktar.

Örnek çözümü göster

function WeatherCard({ city, temp, condition }) {
  return (
    <div className={temp < 0 ? "cold" : "warm"}>
      <h2>{city}</h2>
      <p>{temp}°C</p>
      <p>{condition}</p>
    </div>
  );
}

export default WeatherCard;

Kendini test et

Sıcaklık 0'dan küçükse hangi sınıf?
- hot
- warm
- cold
- cool
Cevabı göster

cold — temp < 0 ise "cold" sınıfı seçilir.
Hava durumu parçalarını eşleştir

city

Şehir
temp

Sıcaklık
condition

Durum
cold

Düşük sıcaklık

Sıradaki ders: Meydan okuma: Sepet özeti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler