Nó được gọi là JSX và nó là phần mở rộng cú pháp của JavaScript. Chúng tôi khuyên bạn nên sử dụng nó với React để mô tả giao diện người dùng trông như thế nào. JSX có thể khiến bạn liên tưởng đến một ngôn ngữ mẫu, nhưng nó có đầy đủ sức mạnh của JavaScript
JSX tạo ra các “yếu tố” React. Chúng ta sẽ khám phá việc hiển thị chúng cho DOM trong phần tiếp theo. Dưới đây, bạn có thể tìm thấy kiến thức cơ bản về JSX cần thiết để bắt đầu
Tại sao lại là JSX?
React chấp nhận thực tế rằng logic hiển thị vốn đã được kết hợp với logic UI khác. cách các sự kiện được xử lý, cách trạng thái thay đổi theo thời gian và cách dữ liệu được chuẩn bị để hiển thị
Thay vì phân tách các công nghệ một cách giả tạo bằng cách đặt đánh dấu và logic vào các tệp riêng biệt, React phân tách các mối quan tâm bằng các đơn vị được ghép lỏng lẻo gọi là “thành phần” chứa cả hai. Chúng ta sẽ quay lại các thành phần trong phần tiếp theo, nhưng nếu bạn chưa thấy thoải mái khi đặt đánh dấu trong JS, bài nói chuyện này có thể thuyết phục bạn bằng cách khác
React không yêu cầu sử dụng JSX, nhưng hầu hết mọi người thấy nó hữu ích như một công cụ hỗ trợ trực quan khi làm việc với giao diện người dùng bên trong mã JavaScript. Nó cũng cho phép React hiển thị các thông báo lỗi và cảnh báo hữu ích hơn
Với cách đó, chúng ta hãy bắt đầu
Nhúng biểu thức vào JSX
Trong ví dụ dưới đây, chúng tôi khai báo một biến có tên là const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;2 và sau đó sử dụng nó bên trong JSX bằng cách gói nó trong dấu ngoặc nhọn
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
Bạn có thể đặt bất kỳ biểu thức JavaScript hợp lệ nào bên trong dấu ngoặc nhọn trong JSX. Ví dụ: const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;3, const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;4 hoặc const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;5 đều là các biểu thức JavaScript hợp lệ
Trong ví dụ bên dưới, chúng tôi nhúng kết quả của việc gọi một hàm JavaScript, const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;5, vào một phần tử const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;7
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );
Dùng thử trên CodePen
Chúng tôi chia JSX thành nhiều dòng để dễ đọc. Mặc dù không bắt buộc nhưng khi thực hiện việc này, chúng tôi cũng khuyên bạn nên đặt nó trong ngoặc đơn để tránh những cạm bẫy của việc chèn dấu chấm phẩy tự động
JSX cũng là một biểu thức
Sau khi biên dịch, các biểu thức JSX trở thành các lệnh gọi hàm JavaScript thông thường và đánh giá các đối tượng JavaScript
Điều này có nghĩa là bạn có thể sử dụng JSX bên trong các câu lệnh const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;8 và vòng lặp const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;9, gán nó cho các biến, chấp nhận nó làm đối số và trả về nó từ các hàm
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;0
Chỉ định thuộc tính với JSX
Bạn có thể sử dụng dấu ngoặc kép để chỉ định chuỗi ký tự làm thuộc tính
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;1
Bạn cũng có thể sử dụng dấu ngoặc nhọn để nhúng biểu thức JavaScript vào thuộc tính
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;2
Không đặt dấu ngoặc kép quanh dấu ngoặc nhọn khi nhúng biểu thức JavaScript vào thuộc tính. Bạn nên sử dụng dấu ngoặc kép (đối với giá trị chuỗi) hoặc dấu ngoặc nhọn (đối với biểu thức), chứ không nên sử dụng cả hai trong cùng một thuộc tính
Cảnh báo
Vì JSX gần với JavaScript hơn là HTML, nên React DOM sử dụng quy ước đặt tên thuộc tính function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );0 thay vì tên thuộc tính HTML
Ví dụ: function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );1 trở thành function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );2 trong JSX và function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );3 trở thành function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );4
Chỉ định trẻ em với JSX
Nếu một thẻ trống, bạn có thể đóng nó ngay lập tức bằng function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );5, như XML
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;9
Thẻ JSX có thể chứa con
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;0
JSX ngăn chặn các cuộc tấn công tiêm chích
Việc nhúng đầu vào của người dùng vào JSX là an toàn
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;1
Theo mặc định, React DOM thoát mọi giá trị được nhúng trong JSX trước khi hiển thị chúng. Do đó, nó đảm bảo rằng bạn không bao giờ có thể tiêm bất kỳ thứ gì không được viết rõ ràng trong ứng dụng của mình. Mọi thứ được chuyển đổi thành một chuỗi trước khi được hiển thị. Điều này giúp ngăn chặn các cuộc tấn công XSS (cross-site-scripting)
JSX đại diện cho các đối tượng
Babel biên dịch JSX thành _______76 cuộc gọi
Hai ví dụ này giống hệt nhau
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;3
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;0
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );6 thực hiện một số kiểm tra để giúp bạn viết mã không có lỗi nhưng về cơ bản, nó tạo ra một đối tượng như thế này
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;1
Những đối tượng này được gọi là "Các phần tử phản ứng". Bạn có thể coi chúng như những mô tả về những gì bạn muốn thấy trên màn hình. React đọc các đối tượng này và sử dụng chúng để xây dựng DOM và cập nhật nó
Chúng ta sẽ khám phá việc kết xuất các phần tử React cho DOM trong phần tiếp theo
Mẹo
Chúng tôi khuyên bạn nên sử dụng định nghĩa ngôn ngữ “Babel” cho trình soạn thảo mà bạn chọn để cả mã ES6 và mã JSX đều được đánh dấu chính xác
Làm cách nào để chuyển đổi React sang HTML?
Ví dụ .nhập Phản ứng từ 'phản ứng';nhập ReactHTMLConverter từ 'Reac-html-converter/node';lớp Kiểm tra mở rộng React. Thành phần {kết xuất () (return{this. props. text};.bộ chuyển đổi const = ReactHTMLConverter mới();Làm cách nào để chuyển đổi HTML thành văn bản trong React js?
Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8.{'First · Second'}.An toàn hơn - Sử dụng số Unicode cho thực thể bên trong chuỗi Javascript. .Hoặc một mảng hỗn hợp với các chuỗi và phần tử JSX. .Phương sách cuối cùng - Chèn HTML thô bằng cách sử dụng một cách nguy hiểmSetInnerHTMLReact có dịch sang HTML không?
Có, cả ứng dụng Angular và React đều có thể (và thường được) "xây dựng" thành HTML, CSS và JS tĩnh .Chúng ta có thể viết HTML trong React không?
JSX cho phép chúng ta viết HTML bằng React . JSX giúp viết và thêm HTML dễ dàng hơn trong React.