Tutorial pengenalan untuk mempelajari sintaks JSX dalam rangka kerja React_Pengetahuan Asas JavaScript

Apakah JSX?

Apabila menulis komponen dengan React, sintaks JSX biasanya digunakan Pada pandangan pertama, ia kelihatan seperti teg XML ditulis secara langsung dalam kod Javascript, ini hanyalah gula sintaks Setiap teg XML akan menjadi alat penukaran menukarnya kepada kod Javascript tulen Sudah tentu, anda juga boleh menulisnya secara langsung dalam kod Javascript tulen Namun, dengan menggunakan JSX, struktur komponen dan hubungan antara komponen akan kelihatan lebih jelas.

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

Apakah teg XML, seperti akan ditukar menjadi oleh alat penukaran JSX?

Contohnya:

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

akan ditukar kepada:

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

Dalam erti kata lain, apabila kami menulis teg XML, kami pada asasnya memanggil kaedah React.createElement dan mengembalikan objek ReactElement.

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

Parameter pertama kaedah ini boleh menjadi rentetan, yang mewakili elemen dalam standard HTML, atau objek jenis ReactClass, yang mewakili komponen tersuai yang telah kami rangkumkan sebelum ini. Parameter kedua ialah objek, atau kamus, yang menyimpan semua atribut yang wujud bagi elemen ini (iaitu, nilai yang pada dasarnya tidak berubah selepas dihantar masuk). Bermula dengan parameter ketiga, semua parameter berikutnya dianggap sebagai elemen anak elemen.

Penukar JSX

Terdapat banyak cara untuk menukar kod dengan sintaks JSX kepada kod Javascript tulen Untuk kod sebaris dan HTML atau fail luaran yang belum ditukar, taip="teks" mesti ditambahkan pada teg skrip /jsx fail JSXTransformer.js Walau bagaimanapun, kaedah ini tidak disyorkan untuk digunakan dalam persekitaran pengeluaran Kaedah yang disyorkan adalah untuk menukar kod sebelum ia masuk dalam talian. Anda boleh menggunakan npm untuk memasang react-tools secara global:

npm install -g react-tools

Dan gunakan alat baris arahan untuk menukar (untuk penggunaan khusus, sila rujuk jsx -h):

jsx src/ build/

Jika anda menggunakan alat automasi, seperti gulp, anda boleh menggunakan plug-in gulp-react yang sepadan.

Menggunakan JS dalam templat HTML

Sangat mudah untuk menggunakan JS dalam templat HTML Anda hanya perlu menggunakan kurungan kerinting untuk mengelilingi kod JS.

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

Apabila disusun ia menjadi seperti ini:

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') 
); 

Perlu diambil perhatian bahawa pendakap kerinting sebenarnya merupakan ungkapan keluaran berubah-ubah akhirnya secara langsung meneruskan kandungan dalam pendakap kerinting sebagai parameter ketiga React.createElement (dilalui secara langsung tanpa sebarang pengubahsuaian). of expression boleh diletakkan di dalamnya, dan sebarang cara penulisan yang tidak boleh digunakan secara langsung sebagai parameter ketiga adalah salah, jadi adalah salah untuk anda menulis seperti ini:

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

Kerana jelas bahawa kandungan dalam pendakap kerinting diletakkan terus pada parameter ketiga, dan sintaksnya tidak betul.

Ini juga salah untuk menulis:

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

Kerana React.createElement(“div”, null, var a = 1;) ialah ralat sintaks.
Kemudian anda juga boleh memahami mengapa ungkapan js dalam kurungan kerinting tidak boleh berakhir dengan koma bertitik.

Perlu diambil perhatian bahawa jika anda mengeluarkan pembolehubah JS dalam atribut, anda tidak boleh menambah petikan, jika tidak, ia akan dianggap sebagai rentetan dan tidak dihuraikan.
Ia sepatutnya kelihatan seperti ini:

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

Gunakan teg HTML

Untuk mencipta elemen yang wujud dalam standard HTML, cuma tulis kod HTML terus:

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

Walau bagaimanapun, perlu diingatkan bahawa kedua-dua atribut kelas dan untuk, sintaks JSX akhirnya akan ditukar kepada Javascript tulen, jadi className dan htmlFor mesti digunakan sama seperti dalam Javascript DOM.

Perkara lain ialah apabila mencipta elemen dalam standard HTML, penukar JSX akan membuang atribut bukan standard tersebut. Jika anda mesti menambah atribut tersuai, anda perlu menambah awalan data sebelum atribut tersuai ini.

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

Komponen ruang nama

Sebagai contoh, apabila membangunkan komponen, komponen mempunyai berbilang subkomponen Jika anda mahu subkomponen ini digunakan sebagai atribut komponen induknya, anda boleh menggunakannya seperti ini:

var Form = MyFormComponent;

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

Dengan cara ini anda hanya perlu menetapkan ReactClass komponen anak sebagai harta komponen induknya:

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

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

Penciptaan elemen kanak-kanak boleh diserahkan terus kepada penukar JSX:

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

Ciri ini memerlukan versi 0.11 dan ke atas

Ekspresi JavaScript

Untuk menulis ungkapan Javascript dalam sintaks JSX, anda hanya perlu menggunakan {}, seperti contoh berikut menggunakan operator ternary:

// 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)
);

Walau bagaimanapun, perlu diingatkan bahawa sintaks JSX hanyalah gula sintaksis di belakangnya memanggil kaedah pembina ReactElement React.createElement, jadi penulisan seperti ini tidak dibenarkan:

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

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

Anda boleh melihat ralat sintaks yang jelas dalam kod Javascript yang ditukar, jadi sama ada gunakan operator ternary atau tulis seperti ini:

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'