`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+Trong CSS, các thuộc tính khác nhau như `color` và `background-color` không ghi đè lẫn nhau. Bạn có thể thiết lập `color` của tất cả `
` thành màu đỏ mà không ảnh hưởng đến `background-color`. Tương tự, **các context React khác nhau không ghi đè lẫn nhau.** Mỗi context mà bạn tạo bằng `createContext()` hoàn toàn tách biệt với những cái khác, và liên kết các component sử dụng và cung cấp *context cụ thể đó*. Một component có thể sử dụng hoặc cung cấp nhiều context khác nhau mà không gặp vấn đề gì.
-## Before you use context {/*before-you-use-context*/}
+## Trước khi bạn sử dụng context {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+Context rất hấp dẫn để sử dụng! Tuy nhiên, điều này cũng có nghĩa là rất dễ lạm dụng nó. **Chỉ vì bạn cần truyền một số props sâu qua nhiều level không có nghĩa là bạn nên đưa thông tin đó vào context.**
-Here's a few alternatives you should consider before using context:
+Dưới đây là một số phương án thay thế bạn nên cân nhắc trước khi sử dụng context:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **Bắt đầu bằng [truyền props.](/learn/passing-props-to-a-component)** Nếu các component của bạn không quá phức tạp, việc truyền một tá props qua một tá component là điều không bất thường. Có thể cảm thấy cực nhọc, nhưng nó làm cho việc component nào sử dụng dữ liệu nào trở nên rất rõ ràng! Người duy trì code của bạn sẽ rất vui khi bạn đã làm luồng dữ liệu trở nên rõ ràng bằng props.
+2. **Trích xuất component và [truyền JSX làm `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) cho chúng.** Nếu bạn truyền một số dữ liệu qua nhiều layer của những component trung gian không sử dụng dữ liệu đó (và chỉ truyền nó xuống), điều này thường có nghĩa là bạn đã quên trích xuất một số component dọc đường. Ví dụ, có thể bạn truyền data props như `posts` tới những component trực quan không sử dụng chúng trực tiếp, như `
`. Thay vào đó, hãy để `Layout` nhận `children` làm prop, và render `
`. Điều này giảm số lượng layer giữa component chỉ định dữ liệu và component cần nó.
-If neither of these approaches works well for you, consider context.
+Nếu cả hai cách tiếp cận này đều không phù hợp với bạn, hãy cân nhắc context.
-## Use cases for context {/*use-cases-for-context*/}
+## Các trường hợp sử dụng cho context {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+- **Theming:** Nếu ứng dụng của bạn cho phép người dùng thay đổi giao diện (ví dụ như dark mode), bạn có thể đặt context provider ở đầu ứng dụng, và sử dụng context đó trong những component cần điều chỉnh giao diện trực quan.
+- **Tài khoản hiện tại:** Nhiều component có thể cần biết người dùng hiện đang đăng nhập. Đưa nó vào context giúp việc đọc nó ở bất cứ đâu trong cây trở nên tiện lợi. Một số ứng dụng cũng cho phép bạn vận hành nhiều tài khoản cùng lúc (ví dụ để bình luận dưới tư cách người dùng khác). Trong những trường hợp đó, việc bọc một phần UI vào provider lồng nhau với giá trị tài khoản hiện tại khác có thể rất tiện lợi.
+- **Routing:** Hầu hết các giải pháp routing sử dụng context bên trong để giữ route hiện tại. Đây là cách mỗi link "biết" nó có đang hoạt động hay không. Nếu bạn xây dựng router riêng, bạn có thể muốn làm điều đó cũng vậy.
+- **Quản lý state:** Khi ứng dụng của bạn phát triển, bạn có thể kết thúc với rất nhiều state gần đầu ứng dụng. Nhiều component xa ở bên dưới có thể muốn thay đổi nó. Việc [sử dụng reducer cùng với context](/learn/scaling-up-with-reducer-and-context) để quản lý state phức tạp và truyền nó xuống những component xa mà không gặp quá nhiều rắc rối là điều phổ biến.
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+Context không giới hạn ở những giá trị tĩnh. Nếu bạn truyền giá trị khác vào lần render tiếp theo, React sẽ cập nhật tất cả các component đang đọc nó bên dưới! Đây là lý do tại sao context thường được sử dụng kết hợp với state.
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+Nhìn chung, nếu một số thông tin cần thiết cho những component xa trong các phần khác nhau của cây, đó là dấu hiệu tốt cho thấy context sẽ giúp ích cho bạn.
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+- Context cho phép component cung cấp một số thông tin cho toàn bộ cây bên dưới nó.
+- Để truyền context:
+ 1. Tạo và export nó bằng `export const MyContext = createContext(defaultValue)`.
+ 2. Truyền nó tới Hook `useContext(MyContext)` để đọc nó trong bất kỳ component con nào, dù sâu đến đâu.
+ 3. Bọc children vào `` để cung cấp nó từ component cha.
+- Context truyền qua bất kỳ component nào ở giữa.
+- Context cho phép bạn viết các component "thích ứng với môi trường xung quanh".
+- Trước khi sử dụng context, hãy thử truyền props hoặc truyền JSX làm `children`.
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### Thay thế prop drilling bằng context {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+Trong ví dụ này, việc toggle checkbox thay đổi prop `imageSize` được truyền tới mỗi ``. Trạng thái checkbox được giữ trong component `App` cấp cao nhất, nhưng mỗi `` cần biết về nó.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Hiện tại, `App` truyền `imageSize` tới `List`, sau đó truyền nó tới mỗi `Place`, rồi truyền nó tới `PlaceImage`. Hãy loại bỏ prop `imageSize`, và thay vào đó truyền nó từ component `App` trực tiếp tới `PlaceImage`.
-You can declare context in `Context.js`.
+Bạn có thể khai báo context trong `Context.js`.
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+Loại bỏ prop `imageSize` từ tất cả các component.
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+Tạo và export `ImageSizeContext` từ `Context.js`. Sau đó bọc List vào `` để truyền giá trị xuống, và `useContext(ImageSizeContext)` để đọc nó trong `PlaceImage`:
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+Lưu ý cách những component ở giữa không cần truyền `imageSize` nữa.