thông qua "khóa" param để phản ứng thành phần

Question

Tôi đang cố gắng chuyển một tham số có tên "khóa" tới thành phần phản hồi và nó không hoạt động. Nếu tôi sử dụng "keyy" thay vì "khóa" thì nó hoạt động.

Dường như đối với tôi rằng "khóa" là từ khóa bị hạn chế và tôi không thể sử dụng nó làm tên tham số.

Điều đó có đúng không?

Đó là ví dụ của tôi:

render() { 
    <MyComponent key='apple' 
       keyy='pear'> 
} 

Answer 1

Vâng, đó là sự thật, chìa khóa là một từ khóa bị hạn chế và không được tuyên truyền như đạo cụ.

---

Phím đóng vai trò như một gợi ý để phản ứng nhưng họ không có được thông qua các thành phần của bạn. Nếu bạn cần các giá trị như nhau trong thành phần của bạn, vượt qua nó một cách rõ ràng như một chỗ dựa với một cái tên khác:

const content = posts.map((post) => 
    <Post 
    key={post.id} 
    id={post.id} 
    title={post.title} /> 
); 

Với ví dụ trên, các thành phần bài viết có thể đọc props.id, nhưng không phải đạo cụ. Chìa khóa.

Đọc thêm vào từ khóa docs

Answer 2

Có key được dành riêng, điều này được sử dụng bởi Phản ứng để xác định các yếu tố html, nó phải là duy nhất. Nó giúp cải thiện hiệu suất. Chúng ta nên thêm một chìa khóa cho mỗi đứa trẻ. Bằng cách này React có thể xử lý thay đổi tối thiểu DOM.

From React Docs:

Phím giúp Phản ứng định được những mục đã thay đổi, được thêm vào, hoặc được loại bỏ. Các phím nên được trao cho các phần tử bên trong mảng để cung cấp cho các yếu tố một bản sắc ổn định. Các phím được sử dụng trong các mảng phải là duy nhất trong số các anh chị em của chúng. Tuy nhiên, chúng không cần phải là duy nhất toàn cầu. Phím phục vụ như là một gợi ý để React nhưng họ không được thông qua cho các thành phần của bạn. Nếu bạn cần cùng một giá trị trong thành phần của mình, hãy chuyển nó một cách rõ ràng như một giá trị có tên khác.

Answer 3

key là từ dành riêng.

Từ here:

Phím giúp Phản ứng định được những mục đã thay đổi, được thêm vào, hoặc được loại bỏ. Các phím nên được trao cho các phần tử bên trong mảng để cung cấp cho các phần tử bản sắc ổn định:

Cách tốt nhất để chọn khóa là sử dụng chuỗi xác định duy nhất mục danh sách trong số các anh chị em của nó. Thông thường, bạn sẽ sử dụng ID từ dữ liệu của mình làm khóa.

This cũng tốt và giải thích tại sao React sử dụng thông số key và lợi ích của te là gì.Bạn sẽ thấy rằng thông số key là corerstone của React thuật toán đối chiếu.

---

Ngoài các key param có vài lời dè dặt hơn bạn không nên sử dụng như:

ref và dangerouslySetInnerHTML

Các sau một dangerouslySetInnerHTML bạn sử dụng thay vì DOM innerHTML

Đăng ký here để biết thêm chi tiết.