რა არ არის დაშვებული დაწერა JavaScript კოდში JSX-ის ფარგლებში?

შემდეგი კონსტრუქციების გამოყენება აკრძალულია:

• მიმწოდებელი ოპერატორები (გარდა ატრიბუტებში, სადაც მნიშვნელობა მიენიჭება).
• ternary ოპერატორი არაოფიციალურად დაბრუნების გარეშე (?:).
• ციკლები (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>;