Kết xuất phần tử React thành HTML ban đầu của nó. React sẽ trả về một chuỗi HTML. Bạn có thể sử dụng phương pháp này để tạo HTML trên máy chủ và gửi đánh dấu xuống theo yêu cầu ban đầu để tải trang nhanh hơn và cho phép các công cụ tìm kiếm thu thập dữ liệu các trang của bạn cho mục đích SEO
các bước sau để chuyển đổi thành phần phản ứng thành chuỗi HTML
bước 1
tạo ứng dụng phản ứng bằng lệnh bên dưới
ví dụ ứng dụng tạo phản ứng npx
ví dụ đĩa cd
bắt đầu npm
bước 2
cài đặt gói Reac-dom bằng lệnh bên dưới
npm cài đặt phản ứng phản ứng-dom
gói nhập khẩu
bước 3
chuyển đổi thành phần phản ứng thành chuỗi HTML
mã ví dụ bên dưới để chuyển đổi chuỗi HTML
mã hình trên
nhập Phản ứng từ "phản ứng"; . /phong cách. css”; . /thử nghiệm"; . renderToString[];
{dữ liệu}
;];Mô-đun này chuyển đổi một chuỗi HTML thô thành một phần tử React hoặc một mảng các phần tử React. Kết xuất thành phần cũng được hỗ trợ
Bạn muốn sử dụng mô-đun này với Preact?
Cài đặt
Cài đặt qua npm
npm install --save react-html-converter
hoặc sợi
yarn add react-html-converter
Thông tin chung
Mô-đun này có hai tích hợp. Một cho nút và một cho trình duyệt
Lý do chính đằng sau việc phải có các phiên bản là mặc dù phiên bản nút cũng hoạt động trong trình duyệt, nhưng việc sử dụng _______________ sẽ bổ sung rất nhiều vào kích thước tệp tổng thể của gói. Do đó, phiên bản trình duyệt sử dụngDOMParser
gốc thay vìparse5
để xử lý phân tích cú pháp chuỗi htmlViệc sử dụng mô-đun giống nhau đối với nút và đối với trình duyệt
Nếu bạn sử dụng mô-đun này trong nút. js chỉ cần nhập tích hợp nút
import ReactHTMLConverter from 'react-html-converter/node'
Nếu bạn sử dụng nó trong trình duyệt, hãy nhập tích hợp trình duyệt
import ReactHTMLConverter from 'react-html-converter/browser'
Thí dụ
import React from 'react';
import ReactHTMLConverter from 'react-html-converter/node';
class Test extends React.Component {
render[] [
return {this.props.text};
];
}
const converter = new ReactHTMLConverter[];
converter.registerComponent['test', Test];
const html = '