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 tabindex
tương ứng với thuộc tính tabIndex
trong React. Ngoại lệ là các thuộc tính aria-*
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, const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
0 và các phần tử khácNế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
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
1 để thay thếnguy hiểmSetInnerHTML
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
2 là sự thay thế của React cho việc sử dụng const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
3 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ập const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
2 và chuyển một đối tượng bằng phím const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
5, để nhắc nhở bản thân rằng điều đó nguy hiểm. Ví dụfunction createMarkup[] {
return {__html: 'First · Second'};
}
function MyComponent[] {
return ;
}
htmlDành cho
Vì
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
6 là một từ dành riêng trong JavaScript, nên các phần tử React sử dụng const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
7 để thay thếonChange
Sự kiện
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
8 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 divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
8 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ựcđã chọn
Nếu bạn muốn đánh dấu một
// Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
0 là đã chọn, hãy tham khảo giá trị của tùy chọn đó trong // Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
1 trong số // Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
2 của nó. Kiểm tra để được hướng dẫn chi tiếtPhong cách
Ghi chú
Một số ví dụ trong tài liệu sử dụng
3 để thuận tiện, nhưng việc sử dụng thuộc tính// Result style: '10px' Hello World! // Result style: '10%' Hello World!
3 làm phương tiện chính của các phần tử tạo kiểu 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.// Result style: '10px' Hello World! // Result style: '10%' Hello World!
3 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à CSS// Result style: '10px' Hello World! // Result style: '10%' Hello World!
Thuộc tính
// Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
3 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 DOM // Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
3 JavaScript, hiệu quả hơn và ngăn chặn các lỗ hổng bảo mật XSS. Ví dụconst divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
Lưu ý rằng các kiểu không được tự động thêm tiền tố. Để 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
const divStyle = {
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
function ComponentWithTransition[] {
return This should work cross-browser;
}
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.
// Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
9]. Tiền tố của nhà cung cấp không phải là // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
0 phải bắt đầu bằng chữ in hoa. Đây là lý do tại sao // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
1 có chữ hoa “W”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ụ
// Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
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ụ:
// Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
2, // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
3, // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
4]. Một danh sách đầy đủ các thuộc tính không có đơn vị có thể được nhìn thấytriệt tiêu Nội dungCó thể chỉnh sửaCảnh báo
Thông thường, sẽ có cảnh báo khi phần tử có phần tử con cũng được đánh dấu là
// Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
5, vì phần tử đó 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ý thủ công // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
5triệ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
// Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
7 thành // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
8, 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 tronggiá trị
Thuộc tính
// Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
1 được hỗ trợ bởi các thành phần const divStyle = {
color: 'blue',
backgroundImage: 'url[' + imgUrl + ']',
};
function HelloWorldComponent[] {
return Hello World!;
}
4, // Result style: '10px'
Hello World!
// Result style: '10%'
Hello World!
2 và accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
3. 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. accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
4 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 đầuTấ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
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
5 giống như API DOM // Just like node.tabIndex DOM API
// Just like node.className DOM API
// Just like node.readOnly DOM API
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