Skip to content

Commit adcab6a

Browse files
committed
change content regarding to reviewer #2
1 parent fb62171 commit adcab6a

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

content/docs/higher-order-components.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Higher-Order Components
44
permalink: docs/higher-order-components.html
55
---
66

7-
Higher-order component (HOC) là một kĩ thuật nâng cao trong React để tái sử dụng logic của component. HOC không thuộc React API. Nó là một kiểu được sinh ra từ pattern của React.
7+
Higher-order component (HOC) là một kĩ thuật nâng cao trong React để tái sử dụng logic của component. HOC không thuộc React API. Nó là một pattern được sinh ra từ khả năng sử dụng kết hợp (compositional) của React.
88

99
Một cách cụ thể, **một higher-order component là một hàm nhận vào một component và trả về một component.**
1010

@@ -238,9 +238,9 @@ render() {
238238
}
239239
```
240240

241-
Quy tắc này giúp cho những HOC trở nên linh hoạt và có thể tái sử dụng.
241+
Quy ước này giúp cho những HOC trở nên linh hoạt và có thể tái sử dụng.
242242

243-
## Quy tắc chung : Khả năng kết hợp tối đa (maximizing composability) {#convention-maximizing-composability}
243+
## Quy ước : Khả năng kết hợp tối đa (maximizing composability) {#convention-maximizing-composability}
244244

245245
Không phải tất cả các HOC đều như sau. Đôi khi chúng chỉ nhận một tham số, component con:
246246

@@ -294,7 +294,7 @@ const EnhancedComponent = enhance(WrappedComponent)
294294
The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](https://redux.js.org/api/compose), and [Ramda](https://ramdajs.com/docs/#compose).
295295
Hàm `compose` thì được cung cấp bở nhiều thư viện third-party bao gồm lodash ([`lodash.flowRight`](https://lodash.com/docs/#flowRight)) và [Ramda](https://ramdajs.com/docs/#compose).
296296

297-
## Quy tắc chung : Cách đặt tên HOC để tiện cho việc debug (tìm và gỡ lỗi){#convention-wrap-the-display-name-for-easy-debugging}
297+
## Quy ước: Cách đặt tên HOC để tiện cho việc debug (tìm và gỡ lỗi){#convention-wrap-the-display-name-for-easy-debugging}
298298

299299
Những container component tạo bởi HOCs đều xuất hiện trong [React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) như bao component khác. Để dễ debug, chọn tên sao cho nó thể hiện rằng nó được sinh ra từ HOC.
300300

@@ -394,7 +394,7 @@ import MyComponent, { someFunction } from './MyComponent.js';
394394

395395
### Refs không được truyền xuống {#refs-arent-passed-through}
396396

397-
Mặc dù quy tắc của HOC là truyền tất cả props xuống component, nhưng điều này không áp dụng với refs. Bởi vì `ref` không hẳng là một prop - như `key`, nó được xử lý bởi React. Nếu bạn thêm một ref vào một element mà component là kết quả từ HOC, refs sẽ mặc nhiên là của container ngoài cùng nhất, không phải component được bao bọc.
397+
Mặc dù quy ước của HOC là truyền tất cả props xuống component, nhưng điều này không áp dụng với refs. Bởi vì `ref` không hẳng là một prop - như `key`, nó được xử lý bởi React. Nếu bạn thêm một ref vào một element mà component là kết quả từ HOC, refs sẽ mặc nhiên là của container ngoài cùng nhất, không phải component được bao bọc.
398398

399399
The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
400400
Giải pháp cho vấn đề này là dùng `React.forwardRef` API (được giới thiệu ở React 16.3). [Tìm hiểu thêm về forward ref tại đây](/docs/forwarding-refs.html).

0 commit comments

Comments
 (0)