Ինչը չի թույլատրվում գրել JavaScript կոդում JSX-ի շրջանակում?

Անհատական կառուցվածքները օգտագործելն արգելվում է.

• Հավասարեցման օպերատորներ (բացառությամբ այն դեպքերի, երբ արժեքը նշանակվում է ատրիբուտներում):
• Թերնարային օպերատոր առանց հստակ վերադարձվող արժեքի (?:).
• Ցիկլեր (for, while, do/while) առանց ֆունկցիաների մեջ, որոնք վերադարձնում են JSX տարրեր:
• if/else հրահանգներ առանց ֆունկցիաների մեջ, որոնք վերադարձնում են JSX տարրեր, կամ առանց ternary օպերատորի օգտագործման:
• Կոդի բլոկներ ({}) առանց հստակ JSX տարրերի վերադարձի (օրինակ, միայն փոփոխականների հայտարարություններ):
• Ներքին մեկնաբանություններ // JSX-ի ներսում կամ /* JSX-ի ներսում */, բացառությամբ մեկնաբանությունների օպերատորների կամ ատրիբուտների/տարրերի միջև:

Թույլատրվում է օգտագործել:

• արտահայտություններ, որոնք վերադարձնում են արժեքներ (փոփոխականներ, ֆունկցիաներ, մեթոդների կանչեր):
• տրամաբանական օպերատորներ && և ||:
• ternary օպերատոր ? ::
• օբյեկտներ և զանգվածներ (եթե դրանք ռենդեր են որպես ցանկ կամ տարր):
• զանգվածների մեթոդների կանչեր (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>;

// Հաստատվում է ternary օպերատորով
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>;