JSX чөйрөсүндө JavaScript кодуна эмне жазууга болбойт?

Төмөнкү курулуштарды колдонуу тыюу салынат:

• Байланыш операторлору (атрибуттарда мааниси берилген учурда гана).
• Ачык маанини кайтарбаган тернардык оператор (?:).
• циклдер (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>;