Phản ứng JSX

JSX là gì?

JSX là viết tắt của JavaScript XML.

JSX cho phép chúng ta viết HTML trong React.

JSX giúp việc viết và thêm HTML trong React dễ dàng hơn.

Mã hóa JSX

JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng vào DOM mà không cần bất kỳ phương thức createElement() và/ appendChild() nào.

JSX chuyển đổi các thẻ HTML thành các phần tử phản ứng.

Đây là hai ví dụ. Cái đầu tiên sử dụng JSX và cái thứ hai thì không:

 const myElement = <h1>I Love JSX!</h1>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);

 const myElement = React.createElement('h1', {}, 'I do not use JSX!'); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);

Như bạn có thể thấy trong ví dụ đầu tiên, JSX cho phép chúng ta viết HTML trực tiếp trong mã JavaScript.

JSX là phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường khi chạy.

Biểu thức trong JSX

Với JSX bạn có thể viết biểu thức bên trong dấu ngoặc nhọn { } .

Biểu thức có thể là biến React, thuộc tính hoặc bất kỳ biểu thức JavaScript hợp lệ nào khác. JSX sẽ thực thi biểu thức và trả về kết quả:

 const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Chèn một khối HTML lớn

Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn:

 const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> );

Một yếu tố cấp cao nhất

Mã HTML phải được gói trong MỘT phần tử cấp cao nhất.

Vì vậy, nếu bạn muốn viết hai đoạn văn, bạn phải đặt chúng bên trong phần tử cha, giống như phần tử div .

 const myElement = ( <div> <p>I am a paragraph.</p> <p>I am a paragraph too.</p> </div> );

Ngoài ra, bạn có thể sử dụng một "đoạn" để ngắt dòng nhiều dòng. Điều này sẽ ngăn chặn việc thêm các nút bổ sung vào DOM một cách không cần thiết.

Một đoạn trông giống như một thẻ HTML trống: <></> .

 const myElement = ( <> <p>I am a paragraph.</p> <p>I am a paragraph too.</p> </> );

Các yếu tố phải được đóng lại

JSX tuân theo các quy tắc XML và do đó các phần tử HTML phải được đóng đúng cách.

 const myElement = <input type="text" />;

Lớp thuộc tính = className

Thuộc tính class là thuộc tính được sử dụng nhiều trong HTML, nhưng vì JSX được hiển thị dưới dạng JavaScript và từ khóa class là một từ dành riêng trong JavaScript nên bạn không được phép sử dụng nó trong JSX.

Thay vào đó, JSX đã giải quyết vấn đề này bằng cách sử dụng className . Khi JSX được hiển thị, nó sẽ dịch các thuộc tính className thành thuộc tính class .

 const myElement = <h1 className="myclass">Hello World</h1>;

Điều kiện - câu lệnh if

React hỗ trợ các câu lệnh if , nhưng không hỗ trợ bên trong JSX.

Để có thể sử dụng các câu lệnh có điều kiện trong JSX, bạn nên đặt các câu lệnh if bên ngoài JSX hoặc thay vào đó bạn có thể sử dụng biểu thức ba ngôi:

Lựa chọn 1:

Viết câu lệnh if bên ngoài mã JSX:

 const x = 5; let text = "Goodbye"; if (x < 10) { text = "Hello"; } const myElement = <h1>{text}</h1>;

Lựa chọn 2:

Thay vào đó hãy sử dụng biểu thức ternary:

 const x = 5; const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

đoạn const = React.createElement( , {}, 'Đây là đoạn văn không sử dụng JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(đoạn);