Forwardref React là gì
Học ReactJs từ số 0 - Advance - P3 - Forwarding Refs
Forwarding RefsForwarding Refs là kỹ thuật cho phép chúng ta sử dụng Show Forwarding refs to DOM componentsChúng ta cùng xem ví dụ sau:
Trong ví dụ trên thì React sẽ ẩn đi các thành phần con của component Việc đóng gói các component riêng biệt là cần thiết và hữu ích nhưng trong một số trường hợp thì nó lại trở nên bất tiện, ví dụ như trong một ứng dụng bao gồm nhiều component ví dụ như
Trong ví dụ dưới đây thì
Với cách này thì các component sử dụng Sau đây là các bước mà đã xảy ra ở Component trên
Các bạn chú ý parameter thứ 2 ở component Forwarding refs in higher-order componentsĐây là kỹ thuật khá là hữu ích với
Component Và nó được sử dụng như này
Nhưng khi sử dụng HOC các bạn sẽ không sử dụng đc
Và nếu như bạn đưa ref vào HOC thì chắc chắn sẽ không sử dụng được bởi vì
Giống như ví dụ này:
Khi các bạn đưa May mắn thay, chúng ta có thể chuyển tiếp rõ ràng các ref đến thành phần FancyButton bên trong bằng API React.forwardRef. React.forwardRef chấp nhận chức năng render và nhận các props và ref và trả về React node Với trường hợp trên chúng ta có thể xử lý như sau:
Displaying a custom name in DevTools
Ví dụ:
Với ví dụ trên thì ở trên Còn nếu render với function thì
Và bạn có thể đặt tên cho dễ debug qua property
|