Ձևավորում և CSS

Ինչպե՞ս կարող եմ կոմպոնենտներին ավելացնել CSS կլասներ

Փոխանցել տողը` որպես className-ի ատրիբուտ.

render() {
  return <span className="menu navigation-menu">Մենյու</span>
}

Սովորաբար CSS կլասները կախված են կոմպոնենտի props-ից կամ state-ից.

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Մենյու</span>
}

Խորհուրդ

Եթե դուք հաճախ եք գրում նմանատիպ կոդ, classnames_eng փաթեթը կպարզեցնի այն։

Կարո՞ղ եմ օգտագործել ներկառուցված ձևավորումներ

Այո, տես ձևավորման փաստաթղթավորումն այտեղ։

Արդյո՞ք ներկառուցված ձևավորումների օգտագործումը վատ է

CSS կլասներն ընդհանուր առմամբ ավելի լավ են արտադրողականության տեսանկյունից, քան` ներկառուցված ձևավորումները։

Ի՞նչ է CSS-in-JS-ը

«CSS-in-JS»-ը հղվում է ձևանմուշին, որտեղ CSS-ը արտաքին ֆայլերում սահմանվելու փոխարեն այն ստեղծվում է JavaScript-ի միջոցով։ Կարդա CSS-in-JS գրադարանների համեմատությունն այստեղ_eng։

Նկատի ունեցեք, որ այս գործառույթը React-ի մաս չի կազմում, այն տրամադրվում է կողմնակի գրադարանների կողմից։ React-ը չգիտի, թե ինչպես են ձևավորումները սահմանված. եթե դեռ չեք կողմնորոշվել, ապա սկզբի համար կարող եք, սովորականի պես, սահմանել ձևավորումներն առանձնացված *.css ֆայլում և հղվել դրանց օգտագործելով className։

Կարո՞ղ եմ React-ում ստեղծել անիմացիաներ

React-ը կարող է օգտագործվել անիմացիաներ ստեղծելու համար։ Օրինակ. տես` React Transition Group_eng-ը և React Motion-ը կամ React Spring-ը։