React là một thư viện JavaScript phổ biến được sử dụng rộng rãi để xây dựng giao diện người dùng. Một trong những tính năng chính của React là khả năng truyền giá trị giữa các thành phần. Việc truyền các giá trị giữa các thành phần là một phần thiết yếu trong việc xây dựng các ứng dụng phức tạp và có thể khó thực hiện đúng. Trong bài viết này, chúng ta sẽ thảo luận về một số mẹo để truyền giá trị giữa các thành phần trong React để có kết quả tối ưu.
1. Sử dụng Đạo cụ
Props là cách phổ biến nhất để truyền giá trị giữa các thành phần trong React. Props là viết tắt của các thuộc tính và chúng được sử dụng để truyền dữ liệu từ thành phần này sang thành phần khác. Prop là một đối tượng đơn giản chứa các cặp khóa-giá trị. Khóa đại diện cho tên của chỗ dựa và giá trị đại diện cho dữ liệu đang được truyền.
Để truyền prop từ thành phần cha sang thành phần con, bạn chỉ cần thêm nó làm thuộc tính cho thành phần con trong phương thức kết xuất của thành phần cha. Ví dụ:
`` `
hàm Parent() {
trở về (
);
}
chức năng Con (đạo cụ) {
trở về (
Tên: {props.name}
Tuổi: {props.age}
);
}
`` `
Trong ví dụ này, chúng ta đang chuyển hai props, name và age, từ Parent component sang Child component. Thành phần Con nhận các đạo cụ này dưới dạng một đối tượng được gọi là đạo cụ.
2. Trạng thái sử dụng
Trạng thái là một cách khác để truyền giá trị giữa các thành phần trong React. State là một đối tượng đại diện cho trạng thái bên trong của một thành phần. Nó được sử dụng để lưu trữ dữ liệu có thể thay đổi theo thời gian.
Để chuyển trạng thái từ thành phần cha mẹ sang thành phần con, bạn có thể chuyển nó dưới dạng chỗ dựa. Thành phần con sau đó có thể cập nhật trạng thái bằng cách gọi một hàm được truyền lại dưới dạng chỗ dựa.
Ví dụ:
`` `
hàm Parent() {
const [count, setCount] = useState (0);
trở về (
);
}
chức năng Con (đạo cụ) {
hàm handleClick() {
props.setCount(props.count + 1);
}
trở về (
Đếm: {props.count}
);
}
`` `
Trong ví dụ này, chúng tôi đang chuyển trạng thái đếm và hàm setCount từ thành phần Cha mẹ sang thành phần Con dưới dạng đạo cụ. Thành phần Con sau đó có thể cập nhật trạng thái đếm bằng cách gọi hàm setCount.
3. Sử dụng ngữ cảnh
Ngữ cảnh là một cách để chuyển các giá trị giữa các thành phần mà không cần phải chuyển chúng qua mọi cấp độ của cây thành phần. Bối cảnh cung cấp một cách để chia sẻ dữ liệu giữa các thành phần không liên quan trực tiếp.
Để sử dụng ngữ cảnh, trước tiên bạn cần tạo một đối tượng ngữ cảnh bằng cách sử dụng hàm createContext. Sau đó, bạn có thể sử dụng thành phần Nhà cung cấp để cung cấp ngữ cảnh cho các thành phần con.
Ví dụ:
`` `
const CountContext = createContext();
hàm Parent() {
const [count, setCount] = useState (0);
trở về (
);
}
hàm Con() {
const {đếm, setCount} = useContext(CountContext);
hàm handleClick() {
setCount(đếm + 1);
}
trở về (
Đếm: {đếm}
);
}
`` `
Trong ví dụ này, chúng tôi đang sử dụng ngữ cảnh để chuyển trạng thái đếm và hàm setCount từ thành phần Cha mẹ sang thành phần Con. Thành phần Con sau đó có thể cập nhật trạng thái đếm bằng cách gọi hàm setCount.
Tóm lại, việc chuyển các giá trị giữa các thành phần trong React là một phần thiết yếu trong việc xây dựng các ứng dụng phức tạp. Bằng cách sử dụng các đạo cụ, trạng thái và ngữ cảnh, bạn có thể truyền các giá trị giữa các thành phần theo cách hiệu quả và dễ quản lý. Với những mẹo này, bạn có thể đảm bảo kết quả tối ưu khi chuyển giá trị giữa các thành phần trong React.
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
- Nguồn: Plato Data Intelligence: PlatoDữ liệu
