JSX được sử dụng cùng với React để loại bỏ các phần được ghép lỏng lẻo của một thành phần, như HTML, CSS và JavaScript và khiến chúng hoạt động cùng nhau trong một tệp duy nhất được gọi là thành phần. Cú pháp của nó có thể dễ viết và hấp dẫn trực quan. Do đó, các phần tử JSX cũng có thể được trả về biến và biến đó có thể được sử dụng để hiển thị
Để minh họa ví dụ, hãy tạo một bảng tĩnh trong một hàm và đưa nó về biến. Chúng ta cũng sẽ tạo một tĩnh ____14_______ bên trong hàm.
1getTable[] {
2 return [
3
4
5
6 Row 1 Col 1
7 Row 1 Col 2
8
9
10 Row 2 Col 1
11 Row 2 Col 2
12
13
14 Row 3 Col 1
15 Row 3 Col 2
16
17
18
19 ];
20}
jsx
Bảng được tạo trong hàm và trả về tập hợp các đánh dấu JSX cho hàm. Vì vậy, khi bạn truy cập chức năng, các đánh dấu JSX tương ứng của bảng sẽ được thay thế
Bước tiếp theo là gọi hàm và gán nó cho biến, như hình bên dưới
1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
jsx
Hàm Cả nội dung tĩnh và động đều có thể được cung cấp cho DOM. Do đó, bạn có thể hiển thị nội dung động dựa trên các toán tử điều kiện riêng lẻ, chẳng hạn như toán tử bậc ba. Ví dụ: nếu bạn muốn hiển thị trạng thái người dùng đã đăng nhập đang hoạt động hoặc không hoạt động, màu hoặc nhãn trạng thái có thể thay đổi dựa trên điều kiện, chẳng hạn như thay đổi thành màu xanh lục hoặc đỏ Để hiểu rõ hơn, hãy tạo hai hàm hiển thị nhãn trạng thái jsx Mỗi hàm trên trả về phần tử JSX cụ thể dưới dạng phần tử JSX Tạo khóa vào đối tượng trạng thái, như hình bên dưới jsx Quan sát rằng có một khóa có tên Bây giờ, hãy gọi hai hàm trên và đặt kết quả của chúng vào các biến bổ sung jsx jsx Điều kiện bậc ba ở trên sử dụng ____1_______7 và dựa trên giá trị của nó [đúng hoặc sai], nhãn tương ứng sẽ được hiển thị trong DOM. Sử dụng một biến trong ______17_______ là một cách tiếp cận phổ biến. Hầu hết các nhà phát triển React sử dụng chúng để quản lý nội dung động từ việc triển khai chức năng và chúng dễ dàng vận hành trong toàn bộ thành phần. JSX với React không phải là một cách tiếp cận bắt buộc, nhưng nó có thể được sử dụng một cách hiệu quả để sử dụng các biểu thức dựa trên JavaScript và các tính năng khác nội tuyến với đánh dấu HTML Trả về một biến trong hàm kết xuất là cách dễ nhất để quản lý đánh dấu JSX, cho dù nội dung là tĩnh hay động. Hãy dùng thử và đào sâu vào JSXthis.getTable[]
được gọi và nó trả về kết quả hoàn chỉnh element, so once you place it inside the
0, the element will be created into the DOM.1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
Kết xuất có điều kiện JSX
1 và 1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
2 status label.1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
1activeContent[] {
2 return Active;
3}
4
5inActiveContent[] {
6 return In-active;
7}
3 , tuy nhiên, bạn nên có một số mã định danh hoặc điều kiện để tự động . 1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
1constructor[props] {
2 super[props];
3 this.state = {
4 isActive: false
5 };
6}
4 trong thành phần và cùng một biến có thể được sử dụng làm điều kiện hoặc có thể đúng . 1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
1const activeVariable = this.activeContent[];
2const inactiveVariable = this.inActiveContent[];
5 được sử dụng để giữ trạng thái nhãn đang hoạt động và 1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
6 giữ nhãn trạng thái không hoạt động. Cả hai có thể hoán đổi cho nhau bằng cách sử dụng toán tử bậc ba, như minh họa bên dưới. 1render[] {
2 // Calling function and assigned it to the variable
3 const mytable = this.getTable[];
4
5 return [
6
7 {/* rendered the JSX */}
8 {mytable}
9
10 ];
11}
1render[] {
2 const activeVariable = this.activeContent[];
3 const inactiveVariable = this.inActiveContent[];
4
5 return [
6
7 {this.state.isActive ? activeVariable : inactiveVariable}
8
9 ];
10}
Phần kết luận
React có tự động thoát khỏi HTML không?
Một thành phần trả về gì trong React?
React có xuất ra HTML không?
Chủ Đề