Cửa sổ bật lên phương thức css codepen
Cổng cung cấp cách tốt nhất để kết xuất nút con thành nút DOM tồn tại bên ngoài hệ thống phân cấp DOM của thành phần gốc
Đối số đầu tiên ( Cách sử dụngThông thường, khi bạn trả về một phần tử từ phương thức kết xuất của một thành phần, phần tử đó sẽ được gắn vào DOM với tư cách là phần tử con của nút cha gần nhất
Tuy nhiên, đôi khi sẽ hữu ích khi chèn một phần tử con vào một vị trí khác trong DOM
Một trường hợp sử dụng điển hình cho các cổng thông tin là khi một thành phần gốc có kiểu
Dùng thử trên CodePen Sự kiện bong bóng qua cổngMặc dù một cổng thông tin có thể ở bất kỳ đâu trong cây DOM, nhưng nó hoạt động giống như một React con bình thường theo mọi cách khác. Các tính năng như ngữ cảnh hoạt động giống hệt nhau bất kể cổng con có phải là cổng hay không, vì cổng vẫn tồn tại trong cây React bất kể vị trí trong cây DOM Điều này bao gồm bong bóng sự kiện. Một sự kiện được kích hoạt từ bên trong một cổng thông tin sẽ lan truyền đến các phần tử tổ tiên trong cây React chứa, ngay cả khi các phần tử đó không phải là tổ tiên trong cây DOM. Giả sử cấu trúc HTML sau
Một thành phần 0 trong 1 sẽ có thể bắt một sự kiện sủi bọt, chưa được bắt từ nút anh chị em 2
Dùng thử trên CodePen Nắm bắt một sự kiện nổi lên từ một cổng thông tin trong thành phần chính cho phép phát triển các bản tóm tắt linh hoạt hơn vốn không phụ thuộc vào cổng thông tin. Ví dụ: nếu bạn kết xuất một thành phần 3, thành phần gốc có thể nắm bắt các sự kiện của thành phần đó bất kể thành phần đó có được triển khai bằng cổng hay không |