Cách tốt nhất có thể để chuyển giá trị trong các thành phần trong React

Có một số cách khác nhau để truyền giá trị giữa các thành phần trong React, tùy thuộc vào tình huống và hành vi mong muốn. Dưới đây là một số cách tiếp cận phổ biến:

Đạo cụ:

Cách phổ biến nhất để truyền giá trị giữa các thành phần là thông qua các đạo cụ. Props được sử dụng để truyền dữ liệu từ component cha sang component con. Thành phần con có thể truy cập các giá trị prop thông qua this.props hoặc bằng cách sử dụng hàm hủy. Ví dụ:

// Parent component
function Parent() { const message = "Hello, world!"; return <Child message={message} />;
} // Child component
function Child(props) { return <div>{props.message}</div>;
}

Bối cảnh:

Ngữ cảnh là một cách để truyền dữ liệu tới một cây các thành phần mà không cần phải truyền các đạo cụ theo cách thủ công ở mọi cấp độ. Ngữ cảnh cung cấp một cách để chia sẻ các giá trị như chủ đề, ngôn ngữ hoặc trạng thái xác thực giữa các thành phần mà không cần phải chuyển một chỗ dựa rõ ràng qua mọi cấp độ của cây. Ví dụ:

const MyContext = React.createContext(); // Parent component
function Parent() { return ( <MyContext.Provider value="Hello, world!"> <Child /> </MyContext.Provider> );
} // Child component
function Child() { const message = React.useContext(MyContext); return <div>{message}</div>;
}

Nâng trạng thái:

Đôi khi, bạn có thể cần truyền dữ liệu giữa các thành phần không liên quan trực tiếp với nhau như cha và con. Trong trường hợp này, bạn có thể nâng trạng thái lên thành một tổ tiên chung và chuyển nó xuống dưới dạng đạo cụ. Ví dụ:

// Grandparent component
function Grandparent() { const [count, setCount] = React.useState(0); return ( <div> <Parent count={count} setCount={setCount} /> </div> );
} // Parent component
function Parent(props) { return ( <div> <Child count={props.count} setCount={props.setCount} /> </div> );
} // Child component
function Child(props) { return ( <div> <button onClick={() => props.setCount(props.count + 1)}> Increment count </button> </div> );
}

Bằng cách làm theo các phương pháp này, bạn có thể chuyển các giá trị giữa các thành phần trong React theo cách phù hợp với trường hợp sử dụng của bạn và giúp bạn xây dựng các ứng dụng có thể bảo trì và mở rộng.

Theo dõi tôi trên Codementor để biết thêm mẹo và thủ thuật như thế này.
Hãy thích và đăng ký tôi để cập nhật những bài viết mới nhất của tôi về các chủ đề khác nhau.

Cảm ơn bạn !