Mit nem szabad írni a JavaScript kódban JSX keretében?

Nem szabad a következő szerkezeteket használni:

• hozzárendelő operátorokat (kivéve az attribútumokon belül, ahol értéket rendelnek hozzá).
• feltételes (ternáris) operátort explicit érték visszaadása nélkül (?:).
• ciklusokat (for, while, do/while) JSX elemeket visszaadó függvényekben való használat nélkül.
• if/else utasításokat JSX elemeket visszaadó függvényekben való használat nélkül vagy a ternáris operátor használata nélkül.
• kódrészeket ({}) explicit JSX visszatérés nélkül (pl. csak változó deklarációk).
• beágyazott kommenteket // JSX-ben vagy /* JSX-ben */, kivéve kommenteket operátorok vagy attribútumok/elemek között.

Engedélyezett:

• értéket visszaadó kifejezéseket (változók, függvények, metódushívások).
• logikai operátorokat && és ||.
• feltételes operátort ? :.
• objektumokat és tömböket (ha listaként vagy elemként renderelik őket).
• tömbmetódushívásokat (map, filter, stb.), amelyek JSX elemeket adnak vissza.
• JSX elemeket visszaadó függvényeket.

Példa

// Nem megengedett
const element = <p>
  let x = 10; // hozzárendelés
  x++; // növelés
</p>;

// Nem megengedett
const element = <p>
  if (condition) { // if utasítás
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Engedélyezett függvényekkel
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Ternáris operátorral engedélyezett
const element = <p>{condition ? 'True' : 'False'}</p>;

// &&-val engedélyezett
const element = <div>{condition && <p>Visible</p>}</div>;

// map-kel engedélyezett
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;