React là một thư viện JavaScript phổ biến được sử dụng để tạo các phần tử giao diện người dùng năng động và có thể tái sử dụng một cách hoàn hảo. XML là định dạng tệp lâu đời nhất thường được sử dụng để quản lý dữ liệu cơ sở dữ liệu và chia sẻ qua internet, vì đây là tùy chọn để nhận phản hồi và gửi yêu cầu đến máy chủ
Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng dữ liệu XML từ máy chủ và kết xuất nó vào ứng dụng React
Tìm nạp dữ liệu XML từ máy chủ
React không có cơ chế sẵn có để tìm nạp và hiển thị dữ liệu, nhưng có rất nhiều thư viện phân tích cú pháp XML có sẵn để sử dụng cho việc này. Trước khi bắt đầu hướng dẫn ứng dụng React, bạn phải có dữ liệu XML để hiển thị, bạn có thể cần thu thập dữ liệu này từ máy chủ
Để tìm nạp dữ liệu từ máy chủ, hãy sử dụng HttpClient Axios, được cài đặt bằng lệnh
6 bên dưới. 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
1npm install axios
vỏ bọc quyền lực
Bây giờ bạn đã cài đặt Axios, hãy tạo một thành phần mới, chẳng hạn như
7 và triển khai 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
0 lifecycle hook as shown below.1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
jsx
Trong các dòng mã trên, RestAPI giả lấy dữ liệu XML từ URL này
1//fakerestapi.azurewebsites.net/api/Authors
Bạn có thể sử dụng bất kỳ dữ liệu API nào mà bạn muốn;
Sau khi nhận được phản hồi từ máy chủ, dữ liệu cần được lưu trữ ở đâu đó trong thành phần và trạng thái cục bộ là lựa chọn chính
1.then[function[response] {
2 self.setState[{ authors: response.data }];
3}]
jsx
Bạn có thể quan sát rằng phản hồi đến từ máy chủ và lưu trữ dữ liệu trong một biến trạng thái có tên là
1 sau đó có thể được sử dụng để hiển thị . 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
Hiển thị dữ liệu XML trong ứng dụng React
Cho đến giờ trong hướng dẫn này, bạn đã sử dụng một HttpClient để tìm nạp dữ liệu XML từ máy chủ. Bước tiếp theo là hiển thị dữ liệu được phân tích cú pháp XML cho khách hàng theo nhiều cách khác nhau
Sử dụng Loại nội dung dưới dạng XML
Khi tìm nạp dữ liệu từ máy chủ, hãy chỉ định loại nội dung là XML
1axios
2.get["//fakerestapi.azurewebsites.net/api/Authors", {
3 "Content-Type": "application/xml; charset=utf-8"
4}]
jsx
Vì vậy, sau khi bạn kích hoạt API, phản hồi sẽ được phân tích cú pháp thành
2 , giúp bạn dễ dàng sử dụng và thao tác với dữ liệu đối tượng. 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
________số 8
jsx
Trong ví dụ trên với giá trị trạng thái
1 , bạn có thể lấy danh sách tác giả đến từ máy chủ. Việc sử dụng hàm 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
4 giúp bạn lặp lại các mục của mảng. 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
Sử dụng Thư viện phân tích cú pháp XML của bên thứ ba
Bạn đã học cách tìm nạp dữ liệu XML bằng API và hiển thị cho người dùng. Ngoài ra, bạn có thể sử dụng các thư viện bên thứ ba khác nhau, một số thư viện bao gồm
- xml-để-phản ứng
- xml2js
- xml-to-json
- xml-js
phản ứng-xml-phân tích cú pháp
Đây là một số thư viện có thể được sử dụng để phân tích cú pháp dữ liệu XML trong ứng dụng React. Hãy thử một trong số chúng
Trước khi sử dụng thư viện, bạn cần cài đặt nó. Tôi sẽ minh họa thư viện ______15 trong hướng dẫn này.
1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
2vỏ bọc quyền lực
Sau khi cài đặt thư viện, hãy triển khai chức năng thư viện
1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
3jsx
Như bạn có thể quan sát trong ví dụ trên, trình phân tích cú pháp được sử dụng là ______16 , khởi tạo hàm trình phân tích cú pháp từ thư viện.
Sau khi khởi tạo trình phân tích cú pháp, bước tiếp theo là cung cấp dữ liệu XML cho trình phân tích cú pháp bằng hàm
7 , hàm chấp nhận XML hợp lệ . 1componentDidMount[] {
2 var self = this;
3 axios
4 .get["//fakerestapi.azurewebsites.net/api/Authors", {
5 "Content-Type": "application/xml; charset=utf-8"
6 }]
7 .then[function[response] {
8 self.setState[{ authors: response.data }];
9 }]
10 .catch[function[error] {
11 console.log[error];
12 }];
13}
Sau khi bạn thực hiện ví dụ trên, nhật ký giao diện điều khiển sẽ có dạng như bên dưới
Dữ liệu XML được chuyển đổi hoàn toàn thành một đối tượng JavaScript và mỗi phần tử con của XML là phần tử con của đối tượng cha, như bạn có thể thấy trong ảnh chụp màn hình
Đây là cách dữ liệu XML từ một nguồn bên trong hoặc bên ngoài có thể được phân tích cú pháp thành một đối tượng hoặc JSON bằng thư viện của bên thứ ba
Phần kết luận
React là một thư viện JavaScript và mọi thứ trong JavaScript đều là một đối tượng, nhưng đôi khi bạn có thể cần truy cập vào các định dạng khác nhau như XML và JSON, vì vậy khá dễ dàng để phân tích một đối tượng
Trong hướng dẫn này, bạn đã học cách phân tích cú pháp dữ liệu XML và hiển thị dữ liệu đó cho người dùng bằng cách sử dụng loại nội dung của phản hồi và thư viện của bên thứ ba. Tôi hy vọng nó hữu ích cho bạn