Ein Einführungs-Tutorial zum Erlernen der JSX-Syntax im React Framework von JavaScript_Grundkenntnisse

Was ist JSX?

Beim Schreiben von Komponenten mit React wird normalerweise die JSX-Syntax verwendet. Auf den ersten Blick sieht es so aus, als ob XML-Tags direkt in den Javascript-Code geschrieben werden. Tatsächlich ist dies nur ein Syntax-Zucker wandelt es in reinen Javascript-Code um. Natürlich können Sie es auch direkt in reinen Javascript-Code schreiben. Durch die Verwendung von JSX wird die Struktur der Komponente und die Beziehung zwischen den Komponenten jedoch klarer.

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

In was wird ein XML-Tag wie vom JSX-Konvertierungstool konvertiert?

Zum Beispiel:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

wird umgewandelt in:

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

Mit anderen Worten: Wenn wir ein XML-Tag schreiben, rufen wir im Wesentlichen die React.createElement-Methode auf und geben ein ReactElement-Objekt zurück.

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

Der erste Parameter dieser Methode kann eine Zeichenfolge sein, die ein Element innerhalb des HTML-Standards darstellt, oder ein Objekt vom Typ ReactClass, das die zuvor gekapselte benutzerdefinierte Komponente darstellt. Der zweite Parameter ist ein Objekt oder Wörterbuch, das alle inhärenten Attribute dieses Elements speichert (d. h. den Wert, der sich nach der Übergabe grundsätzlich nicht ändert). Ab dem dritten Parameter werden nachfolgende Parameter als untergeordnete Elemente des Elements betrachtet.

JSX-Konverter

Es gibt viele Möglichkeiten, Code mit JSX-Syntax in reinen Javascript-Code zu konvertieren. Für Inline- und HTML-Code oder externe Dateien, die nicht konvertiert wurden, muss type="text" zum Skript-Tag hinzugefügt und eingeführt werden Die Datei JSXTransformer.js wird jedoch nicht für die Verwendung in einer Produktionsumgebung empfohlen. Die empfohlene Methode besteht darin, den Code zu konvertieren, bevor er online geht:

npm install -g react-tools

Und verwenden Sie zum Konvertieren das Befehlszeilentool (spezifische Verwendung finden Sie unter jsx -h):

jsx src/ build/

Wenn Sie Automatisierungstools wie gulp verwenden, können Sie das entsprechende Plug-in gulp-react verwenden.

JS in einer HTML-Vorlage verwenden

Es ist sehr praktisch, JS in HTML-Vorlagen zu verwenden. Sie müssen nur geschweifte Klammern verwenden, um den JS-Code zu umgeben.

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

Beim Kompilieren sieht es so aus:

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
); 

Es ist zu beachten, dass es sich bei den geschweiften Klammern tatsächlich um einen variablen Ausgabeausdruck handelt, der den Inhalt in den geschweiften Klammern letztendlich direkt als dritten Parameter von React.createElement übergibt (daher nur eine Zeile). Darin kann ein beliebiger Ausdruck platziert werden, und jede Schreibweise, die nicht direkt als dritter Parameter verwendet werden kann, ist falsch, daher ist es falsch, wenn Sie so schreiben:

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
); 

Weil es offensichtlich ist, dass der Inhalt in den geschweiften Klammern direkt auf dem dritten Parameter steht und die Syntax falsch ist.

Das ist auch falsch zu schreiben:

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
); 

Weil React.createElement(“div”, null, var a = 1;) ein Syntaxfehler ist.
Dann können Sie auch verstehen, warum der js-Ausdruck in geschweiften Klammern nicht mit einem Semikolon enden kann.

Es ist zu beachten, dass Sie bei der Ausgabe einer JS-Variablen in einem Attribut keine Anführungszeichen hinzufügen können, da diese sonst als Zeichenfolge behandelt und nicht analysiert werden.
Es sollte so aussehen:

<a title={title}>链接</a>

Verwenden Sie HTML-Tags

Um ein Element zu erstellen, das im HTML-Standard vorhanden ist, schreiben Sie einfach direkt HTML-Code:

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

Es ist jedoch zu beachten, dass die beiden Attribute class und for in der JSX-Syntax irgendwann in reines Javascript umgewandelt werden, sodass className und htmlFor genau wie im Javascript-DOM verwendet werden müssen.

Ein weiterer Punkt ist, dass der JSX-Konverter beim Erstellen von Elementen innerhalb des HTML-Standards diese nicht standardmäßigen Attribute verwirft. Wenn Sie benutzerdefinierte Attribute hinzufügen müssen, müssen Sie das Datenpräfix vor diesen benutzerdefinierten Attributen hinzufügen.

<div data-custom-attribute="foo" />

Namespace-Komponenten

Wenn Sie beispielsweise eine Komponente entwickeln, verfügt eine Komponente über mehrere Unterkomponenten. Wenn Sie möchten, dass diese Unterkomponenten als Attribute ihrer übergeordneten Komponente verwendet werden, können Sie dies wie folgt verwenden:

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

Auf diese Weise müssen Sie nur die ReactClass der untergeordneten Komponente als Eigenschaft ihrer übergeordneten Komponente verwenden:

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

Die Erstellung untergeordneter Elemente kann direkt an den JSX-Konverter übergeben werden:

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

Diese Funktion erfordert Version 0.11 und höher

Javascript-Ausdruck

Um Javascript-Ausdrücke in JSX-Syntax zu schreiben, müssen Sie nur {} verwenden, wie im folgenden Beispiel mit dem ternären Operator:

// Input (JSX):
var content = <Container>{window.isLoggedIn &#63; <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
 Container,
 null,
 window.isLoggedIn &#63; React.createElement(Nav) : React.createElement(Login)
);

Es sollte jedoch beachtet werden, dass die JSX-Syntax nur syntaktischer Zucker ist. Dahinter steckt die Konstruktormethode React.createElement von ReactElement, sodass das Schreiben wie folgt nicht zulässig ist:

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

Sie können offensichtliche Syntaxfehler im konvertierten Javascript-Code sehen, also verwenden Sie entweder den ternären Operator oder schreiben Sie so:

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

这样就相当于：

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'