ReactJs: Đặt thuộc tính data- trên các phần tử không có JSX

Question

Phản hồi hỗ trợ các thuộc tính data- * và aria- * trên các phần tử. Khi sử dụng API thành phần, tôi đoán các thuộc tính này có thể được đặt giống như các phần còn lại:

React.DOM.div({style: {...}, dataMyFoo: 'bar'}, ...) 

Không. Điều đó không hiệu quả. Thuộc tính dataMyFoo bị bỏ qua âm thầm. Tôi đọc ở đâu đó rằng những thứ này cần phải là chữ thường. Cách thực hiện:

React.DOM.div({style: {...}, datamyfoo: 'bar'}, ...) 

Một lần nữa, bỏ qua âm thầm.

Điều này có khả thi không? Nếu vậy, bí mật là gì? Tôi đã dành khá nhiều thời gian để tìm kiếm mà không cần tìm câu trả lời.

Answer 1

Câu trả lời, nó quay ra, là sử dụng gạch nối-tách tất cả các tên chữ thường cho thuộc tính dữ liệu, như vậy:

React.DOM.div({style: {...}, 'data-my-foo': 'bar'}, ...) 

Lưu ý rằng bạn phải trích dẫn tên thuộc tính trong trường hợp này, vì có dấu gạch nối là không được phép trong số nhận dạng trong Javascript.