Tôi muốn chuyển đổi HTML mà tôi nhận được từ yêu cầu mạng thành JSON để tôi có thể dễ dàng đọc các giá trị. Nếu có cách đọc các giá trị trực tiếp từ HTML, vui lòng cho tôi biết trong một nhận xét tôi đã tìm thấy thư viện này: //github.com/andrejewski/himalaya nhưng khi tôi cố gắng chạy ví dụ trong ứng dụng của tôi, tôi gặp lỗi Cannot read property prototype of undefined
vì vậy tôi cho rằng thư viện này không hoạt động trong React-rative vì nó chứa mô-đun Node JS lõi. Đây là mã:
If there is a way to read values straight from HTML please let me know in a comment
I have found this library: //github.com/andrejewski/himalaya
but when I try to run the example in my app I get the error Cannot read property prototype of undefined
so I assume this library doesn't work
in react-native because it contains a core Node JS module.
This was the code:
import {parse} from 'himalaya'
const html = this.state.html
const json = parse[html]
console.log['👉', json]
Một số ví dụ HTML có thể là:
Himalaya parsed me...
Đầu ra dự kiến của HTML này là:
[{
type: 'element',
tagName: 'div',
attributes: [{
key: 'class',
value: 'post post-featured'
}],
children: [{
type: 'element',
tagName: 'p',
attributes: [],
children: [{
type: 'text',
content: 'Himalaya parsed me...'
}]
}, {
type: 'comment',
content: ' ...and I liked it. '
}]
}]
Có cách nào khác/thư viện để chuyển đổi HTML thành JSON trong React Native không?
[{
type: 'element',
tagName: 'div',
attributes: [{
key: 'class',
value: 'post post-featured'
}],
children: [{
type: 'element',
tagName: 'p',
attributes: [],
children: [{
type: 'text',
content: 'Himalaya parsed me...'
}]
}, {
type: 'comment',
content: ' ...and I liked it. '
}]
}]
1 Prop là thuận tiện để sử dụng, như đã được chứng minh trong hướng dẫn này và có nhiều trường hợp sử dụng. Tuy nhiên, theo tài liệu chính thức của React, việc đặt HTML từ mã rất rủi ro vì nó dễ dàng vô tình đưa người dùng của bạn vào một cuộc tấn công kịch bản chéo trang, đó là lý do tại sao nó được đặt tên như vậy. Do đó, bạn nên thận trọng và nhận thức được các lỗ hổng mà bạn đang phơi bày ứng dụng của mình. Gaurav Singhal
Phát triển web phía trước
Giới thiệu
Nhiều ứng dụng web hiện đại có khả năng định dạng văn bản đầu vào, chẳng hạn như bằng cách thêm thụt lề, thay đổi kích thước phông chữ hoặc kiểu phông chữ, làm cho văn bản in đậm hoặc in nghiêng, v.v. Các ứng dụng này giữ lại định dạng của văn bản đó bằng cách lưu trữ nội dung cùng với đánh dấu của nó trong cơ sở dữ liệu. Sau đó, máy chủ trả lại toàn bộ đánh dấu dưới dạng chuỗi cho frontend, trả về các phần tử HTML từ JSON đó để hiển thị chúng trên trang.
Hướng dẫn này sẽ hướng dẫn bạn qua quá trình kết xuất các yếu tố HTML trực tiếp từ phản hồi JSON trên trang.
Sử dụng propinersetinnerhtml nguy hiểm
Trong React, bạn có thể đặt HTML bên trong của một thùng chứa bằng dangerouslySetInnerHTML
prop. Vì vậy, nếu bạn đang sử dụng dòng JavaScript sau đây để đặt HTML bên trong của container
Himalaya parsed me...
0 ...dangerouslySetInnerHTML
prop. So if you are using the following line of JavaScript to set the inner HTML of a
Himalaya parsed me...
0 container ...1const htmlDiv=document.querySelector['div'];
2const htmlPart='Welcome to this page
'
3htmlDiv.innerHTML=htmlPart;
JavaScript
... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML
prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa
Himalaya parsed me...
2 và giá trị của HTML bạn muốn đặt HTML bên trong của container. Bạn có thể làm những điều trên trong React như:dangerouslySetInnerHTML
prop to your container and passing an object to it with the key
Himalaya parsed me...
2 and value of the HTML you want to set that container's inner HTML to. You can do the above in React as: 1import React from 'react';
2
3const RenderHTML=[]=>{
4 const htmlPart='Welcome to this page
'
5 return[
6
7 ]
8}
JSX
Hãy xem xét việc thực hiện thực tế với một ví dụ chi tiết.
Thực hiện trong React
Trong ví dụ này, bạn sẽ tạo một phản hồi JSON giả chứa một số phần tử HTML dưới dạng chuỗi và đưa chúng trở lại DOM. Trường hợp sử dụng được thể hiện trong ví dụ này liên quan đến một cổng thông tin trong đó một nhà tuyển dụng đã đăng một công việc với một mô tả công việc được định dạng. Khi hiển thị công việc này cho người dùng, bạn phải hiển thị mô tả công việc với cùng định dạng như đã đăng.
Tạo Json giả
Bạn có thể chế giễu bất kỳ API nào bằng cách lưu trữ dữ liệu JSON của nó bên trong tệp JavaScript và xuất nó dưới dạng đối tượng. Tạo một tệp JavaScript trống được gọi là
Himalaya parsed me...
3 với mã sau:
Himalaya parsed me...
3 with the following code:1export default {
2 "Job Description": " Supply Chain Manager @CargoChainzz Pvt Limited
This job requires at least 3 years of experience
"
3}
JavaScript
... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML
prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa
Himalaya parsed me...
2 và giá trị của HTML bạn muốn đặt HTML bên trong của container. Bạn có thể làm những điều trên trong React như:Sử dụng propinersetinnerhtml nguy hiểm
Trong React, bạn có thể đặt HTML bên trong của một thùng chứa bằng dangerouslySetInnerHTML
prop. Vì vậy, nếu bạn đang sử dụng dòng JavaScript sau đây để đặt HTML bên trong của container
Himalaya parsed me...
0 ...
Himalaya parsed me...
4 object inside the component in which you want to render it.1import data from './data';
JavaScript
... Bạn có thể làm tương tự bằng cách chuyển dangerouslySetInnerHTML
prop cho container của bạn và chuyển một đối tượng cho nó bằng khóa
Himalaya parsed me...
2 và giá trị của HTML bạn muốn đặt HTML bên trong của container. Bạn có thể làm những điều trên trong React như:
Himalaya parsed me...
5 inside a lifecycle hook. For brevity purposes, let's use the object directly.JSX Himalaya parsed me... Himalaya parsed me... Himalaya parsed me... Himalaya parsed me... Himalaya parsed me...
0, pass the dangerouslySetInnterHTML prop with an object of key
2 and value as
8, as
9 property of
4 contains your HTML elements as a string .
1
JSX
Hãy xem xét việc thực hiện thực tế với một ví dụ chi tiết.
Thực hiện trong React
Trong ví dụ này, bạn sẽ tạo một phản hồi JSON giả chứa một số phần tử HTML dưới dạng chuỗi và đưa chúng trở lại DOM. Trường hợp sử dụng được thể hiện trong ví dụ này liên quan đến một cổng thông tin trong đó một nhà tuyển dụng đã đăng một công việc với một mô tả công việc được định dạng. Khi hiển thị công việc này cho người dùng, bạn phải hiển thị mô tả công việc với cùng định dạng như đã đăng.
1 prop is convenient to
use, as demonstrated in this guide, and has plenty of use cases. However, according to React's official documentation, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting attack, which is why it is named so. Hence, you should be cautious and aware of the vulnerabilities you are exposing your app to. [{
type: 'element',
tagName: 'div',
attributes: [{
key: 'class',
value: 'post post-featured'
}],
children: [{
type: 'element',
tagName: 'p',
attributes: [],
children: [{
type: 'text',
content: 'Himalaya parsed me...'
}]
}, {
type: 'comment',
content: ' ...and I liked it. '
}]
}]