Дархост дар рамкии JSX чӣ навишта наметавонад…

Забранено е използването на следните конструкции:

Оператори за присвояване (освен вътре в атрибути, където се присвоява стойност).
Тернарен оператор без явен връщане на стойност (?:).
Цикли (for, while, do/while) без обвиване във функции, които връщат JSX елементи.
Инструкции if/else без обвиване във функции, които връщат JSX елементи или без използване на тернарен оператор.
Блокове от код ({}) без явен връщане на JSX елементи (например, само декларации на променливи).
Вложени коментари // вътре в JSX или /* вътре в JSX */, освен коментари след оператори или между атрибути/елементи.

Позволено е да се използват:

Изрази, които връщат стойности (променливи, функции, извиквания на методи).
Логически оператори && и ||.
Терминарен оператор ? :.
Обекти и масиви (ако се рендерират като списък или елемент).
Обаждания на методи на масиви (map, filter, и др.), които връщат JSX елементи.
Функции, които връщат JSX елементи.

Пример

// Не е позволено
const element = <p>
  let x = 10; // Теглене
  x++; // Инкрементиране
</p>;

// Не е позволено
const element = <p>
  if (condition) { // if инструкция
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Разрешено с използване на функции
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Разрешено с тернарен оператор
const element = <p>{condition ? 'True' : 'False'}</p>;

// Разрешено с &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Разрешено с map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;

Дархост дар рамкии JSX чӣ навишта наметавонад?