Was darf in JavaScript-Code im Rahmen von JSX nicht geschrieben werden?

Folgende Konstruktionen dürfen nicht verwendet werden:

• Zuweisungsoperatoren (außer innerhalb von Attributen, in denen ein Wert zugewiesen wird).
• Ternärer Operator ohne expliziten Rückgabewert (?:).
• Schleifen (for, while, do/while) ohne Umhüllung in Funktionen, die JSX-Elemente zurückgeben.
• if/else-Anweisungen ohne Umhüllung in Funktionen, die JSX-Elemente zurückgeben, oder ohne Verwendung des ternären Operators.
• Codeblöcke ({}) ohne expliziten Rückgabewert von JSX-Elementen (z.B. nur Variablendeklarationen).
• Verschachtelte Kommentare // innerhalb von JSX oder /* innerhalb von JSX */, außer Kommentare nach Operatoren oder zwischen Attributen/Elementen.

Es ist erlaubt:

• Ausdrücke, die Werte zurückgeben (Variablen, Funktionen, Methodenaufrufe).
• Logische Operatoren && und ||.
• Ternärer Operator ? :.
• Objekte und Arrays (wenn sie als Liste oder Element gerendert werden).
• Methodenaufrufe von Arrays (map, filter usw.), die JSX-Elemente zurückgeben.
• Funktionen, die JSX-Elemente zurückgeben.

Beispiel

// Nicht erlaubt
const element = <p>
  let x = 10; // Zuweisung
  x++; // Inkrement
</p>;

// Nicht erlaubt
const element = <p>
  if (condition) { // if-Anweisung
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Erlaubt mit Funktionen
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Erlaubt mit ternärem Operator
const element = <p>{condition ? 'True' : 'False'}</p>;

// Erlaubt mit &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Erlaubt mit map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;