Thuộc tính
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3 là sự thay thế của React cho việc sử dụng const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4 trong trình duyệt DOM. Cũng giống như const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4, sẽ rất rủi ro khi sử dụng thuộc tính này khi xem xét các cuộc tấn công kịch bản chéo trang [XSS]Phản ứng const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
Như bạn có thể biết, chúng ta nên tránh chỉnh sửa trực tiếp các phần tử DOM khi sử dụng React để giữ cho Virtual DOM và DOM thực nhất quán. Nhưng đôi khi chúng ta cần hiển thị văn bản HTML vì nó có thể là một phần nội dung của người dùng [bình luận, bài đăng, v.v.]. Vì lý do đó React có thuộc tính đặc biệt
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3. Chúng tôi không thể lấy dữ liệu theo thuộc tính này như với const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4 và chúng tôi chỉ có thể chuyển đánh dấu htmlĐể áp dụng giá trị chuỗi HTML, bạn chỉ cần chuyển một đối tượng có giá trị là
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
9 và văn bản HTML là giá trịexport function MyComponent[] {
const htmlText = "hello"
return ;
}
Như đầu ra bạn sẽ thấy. xin chào thay vì
0const img = ""
const name = "Mike"
Tại sao const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3 lại nguy hiểm
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
Hãy tưởng tượng trang web của bạn có khối nhận xét với trình soạn thảo văn bản đa dạng thức cho phép người dùng viết văn bản theo kiểu HTML. Khi chúng tôi có thể đặt bất kỳ loại HTML nào vào trang, điều đó có nghĩa là chúng tôi có thể đặt các tập lệnh và chạy nó trên tất cả các trình duyệt của khách truy cập. Nó có thể rất rủi ro
Thông số kỹ thuật HTML5 ngăn việc chạy thẻ
2 được chèn bằngconst img = ""
const name = "Mike"
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4 hoặc const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3, nhưng chúng tôi có thể chuyển tập lệnh dưới dạng trình xử lý trình ngheconst img = ""
const name = "Mike"
Tin vui là có sẵn các công cụ làm sạch HTML giúp phát hiện các phần có khả năng gây hại trong mã HTML và tạo ra một phiên bản sạch và an toàn của mã đó. DOMPurify là trình khử trùng HTML phổ biến nhất
React triển khai hệ thống DOM độc lập với trình duyệt để có hiệu suất và khả năng tương thích giữa các trình duyệt. Chúng tôi đã nhân cơ hội này để dọn sạch một số góc cạnh thô trong quá trình triển khai DOM của trình duyệt
Trong React, tất cả thuộc tính và thuộc tính DOM [bao gồm cả trình xử lý sự kiện] phải là camelCased. Ví dụ: thuộc tính HTML
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3 tương ứng với thuộc tính const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4 trong React. Ngoại lệ là các thuộc tính const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
5 và const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
0, các thuộc tính này phải được viết thường. Ví dụ: bạn có thể giữ const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
1 là const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
1Sự khác biệt trong thuộc tính
Có một số thuộc tính hoạt động khác nhau giữa React và HTML
đã kiểm tra
Thuộc tính
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
3 được hỗ trợ bởi các thành phần const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4 kiểu const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
5 hoặc const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
6. Bạn có thể sử dụng nó để đặt xem thành phần có được kiểm tra hay không. Điều này hữu ích cho việc xây dựng các thành phần được kiểm soát. const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
7 là giá trị tương đương không được kiểm soát, đặt xem thành phần có được kiểm tra khi nó được gắn lần đầu hay khôngtên lớp
Để chỉ định một lớp CSS, hãy sử dụng thuộc tính
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
8. Điều này áp dụng cho tất cả các phần tử DOM và SVG thông thường như const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
9, 40 và các phần tử khácconst img = ""
const name = "Mike"
Nếu bạn sử dụng Phản ứng với các Thành phần Web [không phổ biến], hãy sử dụng thuộc tính
41 để thay thếconst img = ""
const name = "Mike"
nguy hiểmSetInnerHTML
42 là sự thay thế của React cho việc sử dụngconst img = ""
const name = "Mike"
43 trong trình duyệt DOM. Nói chung, việc đặt HTML từ mã là rủi ro vì rất dễ khiến người dùng của bạn vô tình bị tấn công bằng tập lệnh chéo trang [XSS]. Vì vậy, bạn có thể đặt HTML trực tiếp từ React, nhưng bạn phải nhậpconst img = ""
const name = "Mike"
42 và chuyển một đối tượng bằng phímconst img = ""
const name = "Mike"
45, để nhắc nhở bản thân rằng điều đó nguy hiểm. Ví dụconst img = ""
const name = "Mike"
0const img = ""
const name = "Mike"
htmlDành cho
Vì
46 là một từ dành riêng trong JavaScript, nên các phần tử React sử dụngconst img = ""
const name = "Mike"
47 để thay thếconst img = ""
const name = "Mike"
onChange
Sự kiện
48 hoạt động như bạn mong đợi. bất cứ khi nào một trường biểu mẫu được thay đổi, sự kiện này sẽ được kích hoạt. Chúng tôi cố ý không sử dụng hành vi trình duyệt hiện có vìconst img = ""
const name = "Mike"
48 là cách gọi sai cho hành vi của nó và React dựa vào sự kiện này để xử lý đầu vào của người dùng trong thời gian thựcconst img = ""
const name = "Mike"
đã chọn
Nếu bạn muốn đánh dấu một
50 là đã chọn, thay vào đó hãy tham khảo giá trị của tùy chọn đó trongconst img = ""
const name = "Mike"
51 củaconst img = ""
const name = "Mike"
52. Kiểm tra để được hướng dẫn chi tiếtconst img = ""
const name = "Mike"
Phong cách
Ghi chú
Một số ví dụ trong tài liệu sử dụng
53 để thuận tiện, nhưng việc sử dụng thuộc tínhconst img = ""
const name = "Mike"
53 làm phương tiện chính của các thành phần kiểu dáng thường không được khuyến nghị. Trong hầu hết các trường hợp, nên được sử dụng để tham chiếu các lớp được xác định trong biểu định kiểu CSS bên ngoài.const img = ""
const name = "Mike"
53 thường được sử dụng nhất trong các ứng dụng React để thêm các kiểu được tính toán động vào thời điểm kết xuất. Xem thêm Câu hỏi thường gặp. Tạo kiểu và CSSconst img = ""
const name = "Mike"
Thuộc tính
53 chấp nhận đối tượng JavaScript có thuộc tính camelCased thay vì chuỗi CSS. Điều này phù hợp với thuộc tính DOMconst img = ""
const name = "Mike"
53 JavaScript, hiệu quả hơn và ngăn ngừa các lỗ hổng bảo mật XSS. Ví dụconst img = ""
const name = "Mike"
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
Lưu ý rằng các kiểu không phải là autoprefixer. Để hỗ trợ các trình duyệt cũ hơn, bạn cần cung cấp các thuộc tính kiểu tương ứng
4const img = ""
const name = "Mike"
Các khóa kiểu là camelCased để nhất quán với việc truy cập các thuộc tính trên các nút DOM từ JS [e. g.
59]. Tiền tố của nhà cung cấp không phải làconst img = ""
const name = "Mike"
60 phải bắt đầu bằng chữ in hoa. Đây là lý do tại saoconst img = ""
const name = "Mike"
61 có chữ hoa “W”const img = ""
const name = "Mike"
React sẽ tự động thêm hậu tố “px” vào một số thuộc tính kiểu nội tuyến số. Nếu bạn muốn sử dụng các đơn vị khác ngoài “px”, hãy chỉ định giá trị dưới dạng chuỗi với đơn vị mong muốn. Ví dụ
5const img = ""
const name = "Mike"
Tuy nhiên, không phải tất cả các thuộc tính kiểu đều được chuyển đổi thành chuỗi pixel. Một số cái vẫn không có đơn vị [ví dụ:
62,const img = ""
const name = "Mike"
63,const img = ""
const name = "Mike"
64]. Một danh sách đầy đủ các thuộc tính không có đơn vị có thể được nhìn thấyconst img = ""
const name = "Mike"
triệt tiêu Nội dungCó thể chỉnh sửaCảnh báo
Thông thường, có một cảnh báo khi một phần tử có con cũng được đánh dấu là
65, vì nó sẽ không hoạt động. Thuộc tính này chặn cảnh báo đó. Không sử dụng cái này trừ khi bạn đang xây dựng một thư viện như Bản nháp. js quản lýconst img = ""
const name = "Mike"
65 theo cách thủ côngconst img = ""
const name = "Mike"
triệt tiêuHydrationCảnh báo
Nếu bạn sử dụng kết xuất React phía máy chủ, thông thường sẽ có cảnh báo khi máy chủ và máy khách hiển thị nội dung khác nhau. Tuy nhiên, trong một số trường hợp hiếm hoi, rất khó hoặc không thể đảm bảo kết quả khớp chính xác. Ví dụ: dấu thời gian dự kiến sẽ khác nhau trên máy chủ và trên máy khách
Nếu bạn đặt
67 thànhconst img = ""
const name = "Mike"
68, React sẽ không cảnh báo bạn về sự không khớp trong thuộc tính và nội dung của phần tử đó. Nó chỉ hoạt động ở độ sâu một tầng và được dùng làm cửa thoát hiểm. Đừng lạm dụng nó. Bạn có thể đọc thêm về hydrat hóa trongconst img = ""
const name = "Mike"
giá trị
Thuộc tính
51 được hỗ trợ bởi các thành phầnconst img = ""
const name = "Mike"
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4, 52 vàconst img = ""
const name = "Mike"
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
93. Bạn có thể sử dụng nó để đặt giá trị của thành phần. Điều này hữu ích cho việc xây dựng các thành phần được kiểm soát. const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
94 là giá trị tương đương không được kiểm soát, đặt giá trị của thành phần khi nó được gắn lần đầu tiênTất cả các thuộc tính HTML được hỗ trợ
Kể từ React 16, mọi thuộc tính DOM tiêu chuẩn hoặc tùy chỉnh đều được hỗ trợ đầy đủ
React luôn cung cấp API tập trung vào JavaScript cho DOM. Vì các thành phần React thường có cả props tùy chỉnh và liên quan đến DOM, nên React sử dụng quy ước
const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
95 giống như API DOM6const img = ""
const name = "Mike"
Các đạo cụ này hoạt động tương tự như các thuộc tính HTML tương ứng, ngoại trừ các trường hợp đặc biệt được nêu ở trên