React JSX

JSX (JavaScript XML) ist eine JavaScript-Syntaxerweiterung, die wie XML aussieht. In React wird es oft anstelle von regulärem JavaScript verwendet, um UI-Komponenten zu schreiben, wodurch Sie die Struktur und das Verhalten von Komponenten auf HTML-ähnliche Weise beschreiben können.

Die Verwendung von JSX ist nicht zwingend, aber sie hat die folgenden Kernvorteile:

• Effiziente Ausführung: Nach der Kompilierung in JavaScript-Code wird er optimiert und läuft schneller;
• Typsicherheit: Fehler können zur Kompilierzeit gefunden werden (noch besser mit TypeScript);
• Bequemes Schreiben: Die UI-Struktur ist intuitiv und klar, das Einbetten von JavaScript-Ausdrücken ist flexibler, und das Schreiben von Templates ist einfach und schnell;
• Wesensmerkmal: Es ist kein String/HTML; es wird von Babel (in Vite integriert) in React.createElement-Aufrufe kompiliert.

Schauen wir uns zunächst den folgenden Code an:

const element = <h1>Hello, world!</h1>;

Diese scheinbar seltsame Tag-Syntax ist weder ein String noch HTML.

Sie heißt JSX, eine Syntaxerweiterung von JavaScript. Wir empfehlen, JSX in React zu verwenden, um Benutzeroberflächen zu beschreiben.

JSX wird innerhalb von JavaScript implementiert.

Wir wissen, dass Elemente die kleinsten Einheiten sind, aus denen eine React-Anwendung besteht, und JSX wird verwendet, um Elemente in React zu deklarieren.

Anders als Browser-DOM-Elemente sind Elemente in React tatsächlich einfache Objekte. React DOM stellt sicher, dass der Dateninhalt des Browser-DOM mit den React-Elementen konsistent bleibt.

Um React-Elemente in einen Root-DOM-Knoten zu rendern, übergeben wir sie alle an ReactDOM.render(), um sie auf der Seite zu rendern:

Hinweis:

Da JSX JavaScript ist, werden einige Bezeichner wieclassundfornicht als XML-classNameundhtmlForAttributnamen empfohlen. Stattdessen verwendet React DOM

---

JSX-Syntaxregeln

JSX-Syntaxregeln

JSX sieht aus wie HTML, hat aber strenge Regeln:

• HTML kann<br>, aber JSX muss<br />(selbstschließend).
• Alle Tags müssen geschlossen werden:<div></div>。

class → className：

Weil class ein JavaScript-Schlüsselwort ist, verwende stattdessen className.

<div className="container">内容</div>

htmlFor (innerhalb von label):

<label for="id"> → <label htmlFor="id">

Komponenten, die mit einem Großbuchstaben beginnen:

Benutzerdefinierte Komponenten müssen mit einem Großbuchstaben beginnen (Kleinbuchstaben werden als HTML-Tags behandelt).

<Card />  {/* 正确，自定义组件 */}
<card />  {/* 错误，会被当成 <card> HTML 标签 */}

Kommentare:

Verwende{/* Kommentarinhalt */}。

jsx{/* 这是一个 JSX 注释 */}

Wurzelelement:

return kann nur einen Wurzelknoten haben.

return (
  <>  {/* 碎片 Fragment，空标签，不渲染 DOM */}
    <h1>标题</h1>
    <p>段落</p>
  </>
);

Wir können src/App.jsx öffnen und das return ändern zu:

return (
  <>
    <h1 className="title">JSX 语法规则演示</h1>
    <img src="../vite.svg.html" alt="Vite Logo" />
    <br />
    {/* 自闭合标签和注释 */}
    <p>注意 className 和闭合标签</p>
  </>
);

Speichern, um den Effekt zu sehen.

---

Ausdruckseinbettung, bedingtes Rendering, Listen-Rendering

Die mächtigste Funktion von JSX ist, dass du {} verwenden kannst, um JavaScript-Ausdrücke einzubetten (nur Ausdrücke, keine Anweisungen wie if/for).

Ausdruckseinbettung

Jeder gültige JS-Ausdruck kann darin platziert werden{}：

const name = 'example';
const now = new Date().toLocaleString();

return (
  <div>
    <h1>你好，{name}！</h1>
    <p>当前时间：{now}</p>
    <p>计算结果：{2 + 3 * 5}</p>  {/* 17 */}
  </div>
);

Bedingtes Rendern

Verwende ternäre Operatoren oder&&：

const isLoggedIn = true;
const count = 0;

return (
  <div>
    {isLoggedIn ? <h1>欢迎回来，{name}！</h1> : <h1>请登录</h1>}
    
    {count > 0 && <p>你有 {count} 条未读消息</p>}  {/* count 为 0 时不渲染 */}
  </div>
);

Vermeiden:Verwende keine if-Anweisungen direkt in JSX (sie können in Funktionskörpern verwendet werden).

Listen-Rendering (Wichtigkeit von key)

Verwenden Sie map(), um Arrays zu rendern. Sie müssen jedem Element ein key-Attribut hinzufügen (eine eindeutige Kennung, die React dabei hilft, das DOM effizient zu aktualisieren).

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>  {/* key 必须唯一且稳定！ */}
        {item.name}
      </li>
    ))}
  </ul>
);

Wichtigkeit von key:

• Ohne key: React gibt eine Warnung aus, was zu Rendering-Fehlern führen kann (besonders wenn sich die Liste dynamisch ändert).
• Schlechte Angewohnheit: index als key verwenden (key={index}) — wenn sich die Reihenfolge der Liste ändert, kann dies unnötige Re-Renders oder State-Verluste verursachen.
• Best Practice: Verwenden Sie eine eindeutige ID aus den Daten (z. B. Datenbank-ID).

Styling

React bietet mehrere Styling-Ansätze; lernen wir zunächst die beiden grundlegendsten kennen.

Inline-Styles

Verwenden Sie das style-Attribut, dessen Wert ein Objekt ist (camelCase):

return (
  <div
    style={{
      backgroundColor: '#F0F0F0',
      padding: '20px',
      borderRadius: '8px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <h2 style={{ color: 'blue', marginBottom: '10px' }}>
      内联样式示例
    </h2>
  </div>
);

• Vorteil: dynamische Styles sind einfach (Variablen können verwendet werden).
• Nachteil: nicht praktisch für die Wartung komplexer Stile.

CSS Modules (empfohlen, gekapselte Isolation)

Vite unterstützt CSS Modules standardmäßig und vermeidet globale Verschmutzung.

Erstelle src/App.css (bereits vorhanden) oder eine neue Datei src/styles/Card.module.css:

/* Card.module.css */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

.title {
  color: #333;
  margin: 0 0 10px 0;
}

.content {
  color: #666;
}

Importiere und verwende es in der Komponente (Scoped-Klassennamen werden automatisch generiert):

import styles from './styles/Card.module.css';

return (
  <div className={styles.card}>
    <h3 className={styles.title}>标题</h3>
    <p className={styles.content}>内容</p>
  </div>
);

• Vorteil: Klassennamen werden automatisch gehasht (z. B. .card__abc123), daher gibt es keine Konflikte.

Vollständige Übung:Ändere die vorherige Card-Komponente so, dass sie CSS Modules verwendet.

Erstelle src/components/Card.module.css:

.container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: white;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.title {
  margin: 0 0 10px 0;
  padding: 20px 20px 0;
  color: #333;
}

.content {
  padding: 0 20px 20px;
  color: #666;
}

Ändere Card.jsx:

import styles from './Card.module.css';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div className={styles.container}>
      {imageUrl && <img src={imageUrl} alt={title} className={styles.image} />}
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.content}>{content}</p>
    </div>
  );
};

export default Card;

---

JSX verwenden

JSX ähnelt HTML; schauen wir uns ein Beispiel an:

Wir können im obigen Code mehrere HTML-Tags verschachteln und müssen sie mit einem div-Element umschließen. Das p-Element im Beispiel hat ein benutzerdefiniertes Attributdata-myattribute; um benutzerdefinierte Attribute hinzuzufügen, musst dudata-Präfix verwenden.

Getrennte Datei

Ihr React-JSX-Code kann in einer separaten Datei platziert werden, zum Beispiel erstellen wir einehelloworld_react.jsDatei, der Code lautet wie folgt:

Binden Sie dann die JS-Datei in die HTML-Datei ein:

---

JavaScript-Ausdrücke

Wir können JavaScript-Ausdrücke in JSX verwenden. Ausdrücke werden in geschweifte Klammern{}hineingeschrieben. Das Beispiel ist wie folgt:

In JSX können Sie keineif elseAnweisungen verwenden, aber Sie können stattdessen denBedingungsausdruck (ternäre Operation)verwenden. Im folgenden Beispiel, wenn die Variableigleich ist1gibt der Browsertrueaus, wenn der Wert von i geändert wird, gibt erfalse aus.

---

Stile

React empfiehlt die Verwendung von Inline-Stilen. Wir können diecamelCase-Syntax verwenden, um Inline-Stile festzulegen. React fügt nach der angegebenen Elementnummer automatischpxhinzu. Das folgende Beispiel demonstriert für dash1Element, wobei hinzugefügt wirdmyStyleInline-Stil:

---

Kommentare

Kommentare müssen in geschweifte Klammern geschrieben werden, zum Beispiel:

---

Arrays

JSX ermöglicht das Einfügen von Arrays in Vorlagen, und das Array entfaltet automatisch alle Elemente:

Andere Erweiterungen