Mida ei ole lubatud kirjutada JavaScripti koodis JSX raames?

Nepieciešams neizmantot šādas konstrukcijas:

• Pievienošanas operatorus (izņemot atribūtos, kur tiek pievienota vērtība).
• Ternāro operatoru bez skaidras atgriešanas (?:).
• Ciklus (for, while, do/while) bez funkcijas ietvara, kas atgriež JSX elementus.
• if/else instrukcijas bez funkcijas ietvara, kas atgriež JSX elementus, vai bez ternārā operatora.
• Koda blokus ({}) bez skaidras JSX elementu atgriešanas (piemēram, tikai mainīgo deklarācijas).
• Komentārus // JSX iekšienē vai /* JSX iekšienē */, izņemot komentārus pēc operatoriem vai starp atribūtiem/elementiem.

Atļauts izmantot:

• Izteiksmes, kas atgriež vērtības (mainīgos, funkcijas, metožu izsaukumus).
• Loģiskos operatorus && un ||.
• Ternāro operatoru ? :.
• Objektus un masīvus (ja tie tiek attēloti kā saraksts vai elements).
• Masīvu metožu izsaukumus (map, filter utt.), kas atgriež JSX elementus.
• Funkcijas, kas atgriež JSX elementus.

Piemērs

// Neatļauts
const element = <p>
  let x = 10; // Pievienošanas
  x++; // Palielināšana
</p>;

// Neatļauts
const element = <p>
  if (condition) { // `if` instrukcija
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Atļauts ar funkcijām
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Atļauts ar ternāro operatoru
const element = <p>{condition ? 'True' : 'False'}</p>;

// Atļauts ar &&
const element = <div>{condition && <p>Redzams</p>}</div>;

// Atļauts ar map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;