ReactJS - Forwarding Refs: A Beginner's Guide

Xin chào các pháp sư React tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị vào thế giới của React và khám phá một khái niệm叫做 "Forwarding Refs." Đừng lo lắng nếu bạn là người mới bắt đầu lập trình; tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ.forward refs như một chuyên gia!

What are Refs and Why Do We Need to Forward Them?

Trước khi chúng ta nhảy vào.forward refs, hãy nói về refs bản thân. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà (điều này cũng giống như những gì chúng ta làm khi tạo các ứng dụng web). Đôi khi, bạn cần truy cập trực tiếp hoặc thao tác một phần cụ thể của ngôi nhà. Trong React, refs giống như những công cụ đặc biệt cho phép chúng ta làm điều đó với các thành phần của mình.

Bây giờ,.forward refs giống như việc truyền những công cụ đặc biệt qua các phòng khác nhau trong ngôi nhà của chúng ta. Đây là một kỹ thuật cho phép chúng ta gửi một ref qua một thành phần đến một trong số các con của nó. Điều này đặc biệt hữu ích khi chúng ta làm việc với các thư viện thành phần tái sử dụng.

The forwardRef Method: Our Magic Wand

React cung cấp cho chúng ta một phương thức gọi là forwardRef để.forward refs trở nên khả thi. Hãy tưởng tượng nó như một cây phép phép có thể chấp nhận một ref và truyền nó đi xa hơn.

Signature of the forwardRef Method

Hãy cùng nhìn vào cách chúng ta sử dụng cây phép phép này:

const ForwardedComponent = React.forwardRef((props, ref) => {
// Logic của thành phần ở đây
});

Điều này có thể trông有点令人畏惧 lúc đầu, nhưng hãy cùng phân tích nó:

1. Chúng ta đang tạo một thành phần mới và gán nó cho ForwardedComponent.
2. Chúng ta sử dụng React.forwardRef() để bao bọc hàm thành phần của chúng ta.
3. Hàm thành phần của chúng ta bây giờ nhận hai tham số: props (mà chúng ta đã quen thuộc) và ref (người bạn mới của chúng ta).

Applying forwardRef in a Component

Bây giờ, hãy xem cách chúng ta có thể sử dụng điều này trong một tình huống thực tế. Hãy tưởng tượng chúng ta đang tạo một thành phần đầu vào tùy chỉnh mà chúng ta muốn sử dụng trên toàn bộ ứng dụng của mình.

import React from 'react';

const FancyInput = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} style={{border: '2px solid purple'}} />;
});

export default FancyInput;

Hãy phân tích điều này:

1. Chúng ta nhập React (luôn quan trọng!).
2. Chúng ta tạo thành phần FancyInput của mình sử dụng React.forwardRef.
3. Bên trong thành phần của chúng ta, chúng ta trả về một phần tử <input>.
4. Chúng ta truyền ref đến phần tử <input> bằng cách sử dụng thuộc tính ref.
5. Chúng ta lan truyền props vào <input> để nó có thể chấp nhận bất kỳ thuộc tính nào chúng ta truyền cho FancyInput.
6. Chúng ta thêm một chút phong cách để làm cho đầu vào của chúng ta trở nên sang trọng (biên purple, ai có?).

Bây giờ, khi chúng ta sử dụng thành phần FancyInput ở nơi khác trong ứng dụng của chúng ta, chúng ta có thể gắn một ref vào nó, và ref đó thực sự sẽ được gắn vào phần tử <input> cơ bản.

Dưới đây là cách chúng ta có thể sử dụng thành phần mới của mình:

import React, { useRef, useEffect } from 'react';
import FancyInput from './FancyInput';

function App() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return (
<div>
<FancyInput ref={inputRef} placeholder="Type something fancy..." />
</div>
);
}

Trong ví dụ này:

1. Chúng ta tạo một ref sử dụng useRef.
2. Chúng ta truyền ref này đến thành phần FancyInput của mình.
3. Trong钩子 useEffect, chúng ta sử dụng ref để tập trung vào đầu vào khi thành phần được挂载.

Và voilà! Chúng ta đã thành công.forward một ref qua thành phần tùy chỉnh của mình.

Why is this Useful?

Bạn có thể tự hỏi, "Tại sao lại phải trải qua tất cả những khó khăn này?" Well, hãy tưởng tượng bạn đang xây dựng một thư viện các thành phần tái sử dụng. Bằng cách sử dụng forwardRef, bạn đang cung cấp cho người dùng của các thành phần của bạn khả năng tương tác với các phần tử DOM cơ bản khi cần thiết, mà không cần tiết lộ toàn bộ cấu trúc nội bộ của thành phần của bạn.

Đó giống như việc cho ai đó một điều khiển TV chỉ có các nút cần thiết, thay vì làm họ choáng ngợp với toàn bộ mạch điện bên trong TV.

A Table of forwardRef Methods

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã thảo luận:

Phương thức	Mô tả	Ví dụ
React.forwardRef()	Tạo một thành phần React có thể.forward thuộc tính ref đến một thành phần con	const FancyButton = React.forwardRef((props, ref) => ...)
useRef()	Tạo một đối tượng ref thay đổi	const ref = useRef(null)
ref attribute	Gắn ref vào một phần tử React	<input ref={ref} />

Conclusion

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của.forward refs trong React. Nhớ rằng, như bất kỳ công cụ mạnh mẽ nào khác, hãy sử dụng refs và.forward refs một cách审慎. Chúng rất tốt cho việc quản lý tập trung, kích hoạt hiệu ứng动画, hoặc tích hợp với các thư viện DOM của bên thứ ba.

Trong khi tiếp tục hành trình React của bạn, bạn sẽ tìm thấy nhiều tình huống khác nhau nơi.forward refs có thể rất hữu ích. Hãy tiếp tục thực hành, tiếp tục lập trình, và trước khi bạn biết điều đó, bạn sẽ xây dựng các ứng dụng React tuyệt vời!

Chúc các bạn lập trình vui vẻ, và may refs của bạn luôn.forward chính xác!

Credits: Image by storyset