You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/warnings/invalid-aria-prop.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,8 @@ layout: single
4
4
permalink: warnings/invalid-aria-prop.html
5
5
---
6
6
7
-
The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
7
+
The invalid-aria-prop warning sẽ xuất hiện nếu bạn cố gắng render một DOM element với một aria-* prop, nó không tồn tại trong Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
8
8
9
-
1.If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby`and`aria-activedescendant`are often misspelled.
9
+
1.Nếu thấy rằng mình đang sử dụng đúng prop, kiểm tra lỗi chính tả một cách kỹ càng. `aria-labelledby`và`aria-activedescendant`thường bị viết sai .
10
10
11
-
2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
11
+
2. React không nhận ra thuộc tính bạn mô tả. Vấn đề này có vẻ sẽ được sửa trong phiên bản tương lai của React. Tuy nhiên, React hiện tại loại bỏ tất cả thuộc tính không nhận diện được, vì thế mô tả chúng trong ứng dụng React của bạn sẽ khiến chúng không được render.
You are probably here because you got the following error message:
7
+
Bạn có thể ở đây bởi vì bạn gặp những thông báo lỗi dưới đây:
8
8
9
-
> Hooks can only be called inside the body of a function component.
9
+
> Hooks chỉ có thể được gọi bên trong code của một function component.
10
10
11
-
There are three common reasons you might be seeing it:
11
+
Có ba nguyên nhân phổ biến bạn có thể thấy:
12
+
1. Có thể bạn đang dùng **phiên bản không trùng khớp** của React và React DOM.
13
+
2. Bạn có thể đang **vi phạm [Rules of Hooks](/docs/hooks-rules.html)**.
14
+
3. Bạn có thể đang có **một hoặc nhiều hơn bản React** trong cùng một ứng dụng.
12
15
13
-
1. You might have **mismatching versions** of React and React DOM.
14
-
2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
15
-
3. You might have **more than one copy of React** in the same app.
16
+
Hãy nhìn vào từng trường hợp ở dưới đây.
16
17
17
-
Let's look at each of these cases.
18
+
## Phiên bản không trùng khớp của React và React DOM {#mismatching-versions-of-react-and-react-dom}
18
19
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
20
+
Bạn có thể đang sử dụng phiên bản `react-dom` (< 16.8.0) hoặc `react-native` (< 0.59) những phiên bản này chưa hỗ trợ Hooks. Bạn có thể chạy `npm ls react-dom` hoặc `npm ls react-native` trong thư mục ứng dụng của bạn để kiểm tra bạn đang sử dụng phiên bản nào. Nếu bạn thấy nhiều hơn một phiên bản, điều này sẽ gây ra những vấn đề (liệt kê bên dưới).
20
21
21
-
You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
22
+
## Vi phạm những quy tắc của Hooks {#breaking-the-rules-of-hooks}
22
23
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
24
+
Bạn chỉ có thể gọi Hooks **trong khi React render một function component**:
24
25
25
-
You can only call Hooks **while React is rendering a function component**:
26
+
* ✅ Gọi nó ở đầu, bên trong một function component.
27
+
* ✅ Gọi nó ở đầu, bên trong một [custom Hook](/docs/hooks-custom.html).
26
28
27
-
* ✅ Call them at the top level in the body of a function component.
28
-
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
29
-
30
-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
29
+
**Tìm hiệu thêm về điều này ở [Rules of Hooks](/docs/hooks-rules.html).**
31
30
32
31
```js{2-3,8-9}
33
32
function Counter() {
@@ -43,13 +42,13 @@ function useWindowWidth() {
43
42
}
44
43
```
45
44
46
-
To avoid confusion, it’s**not**supported to call Hooks in other cases:
45
+
Để tránh nhầm lẫn , Nó**không**được hỗ trợ để gọi Hooks trong những trường hợp:
47
46
48
-
* 🔴 Do not call Hooks in class components.
49
-
* 🔴 Do not call in event handlers.
50
-
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or`useEffect`.
47
+
* 🔴 Đừng gọi Hooks trong class components.
48
+
* 🔴 Đừng gọi Hooks trong event handlers.
49
+
* 🔴 Đừng gọi Hooks bên trong các function được dùng trong `useMemo`, `useReducer`, hoặc`useEffect`.
51
50
52
-
If you break these rules, you might see this error.
51
+
Nếu bạn vi phạm những quy tắc trên, bạn có thể thấy lỗi này.
53
52
54
53
```js{3-4,11-12,20-21}
55
54
function Bad1() {
@@ -78,45 +77,45 @@ class Bad3 extends React.Component {
78
77
}
79
78
```
80
79
81
-
You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to catch some of these mistakes.
80
+
Bạn có thể sử dụng [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)để bắt những lỗi này.
82
81
83
-
>Note
82
+
>Ghi chú
84
83
>
85
-
>[Custom Hooks](/docs/hooks-custom.html)*may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
84
+
>[Custom Hooks](/docs/hooks-custom.html)*có thể* gọi những Hooks khác (hoàn toàn do mục đích của nó). Điều này hoàn toàn hữu hiệu bởi vì custom Hooks được hỗ trợ chỉ để được gọi khi một function component đang render.
86
85
87
86
88
-
## Duplicate React {#duplicate-react}
87
+
## Trùng lặp React {#duplicate-react}
89
88
90
-
In order for Hooks to work, the`react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
89
+
Để Hooks hoạt động, `react`được import từ mã ứng dụng cần được giải quyết giống như `react`được import từ package `react-dom`.
91
90
92
-
If these`react`imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies**of the`react` package.
91
+
Nếu những`react`được nhập này giải quyết hai đối tượng xuất (export) khác nhau, bạn sẽ thấy cảnh báo. Điều có thể xảy ra nếu bạn **đột ngột kết thúc với hai phiên bản**của package`react`.
93
92
94
-
If you use Node for package management, you can run this check in your project folder:
93
+
Nếu bạn sử dụng Node để quản lý package, bạn có thể kiểm tra nó bằng cách chạy câu lệnh này trong thư mục dự án của bạn:
95
94
96
95
npm ls react
97
96
98
-
If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react`as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)is one possible workaround.
97
+
Nếu bạn thấy nhiều hơn một React, bạn sẽ cần tìm hiểu tại sao nó lại xảy ra và sửa cây phụ thuộc(dependency tree). Ví dụ, có lẽ một thư viện bạn đang sử dụng mô tả sai `react`như là một dependency (hơn là một peer dependency). Cho đến khi thư viện đó được sửa, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)có thể là một cách giải quyết .
99
98
100
-
You can also try to debug this problem by adding some logs and restarting your development server:
99
+
Bạn có thể tìm lỗi gây ra vấn đề này bằng cách thêm vào những logs và khởi động lại máy chủ phát triển(development server):
101
100
102
101
```js
103
-
//Add this in node_modules/react-dom/index.js
102
+
//Thêm cái này vào node_modules/react-dom/index.js
104
103
window.React1=require('react');
105
104
106
-
//Add this in your component file
105
+
//Thêm cái này vào component file
107
106
require('react-dom');
108
107
window.React2=require('react');
109
108
console.log(window.React1===window.React2);
110
109
```
111
110
112
-
If it prints `false`then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991)includes some common reasons encountered by the community.
111
+
Nếu nó in ra `false`thì bạn có có hai Reacts và cần tìm hiểu tại sao nó lại xảy ra. [This issue](https://github.com/facebook/react/issues/13991)bao gồm những nguyên nhân phổ biến được đưa ra bởi cộng đồng.
113
112
114
-
This problem can also come up when you use`npm link`or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp`and`mylib`are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react`from`mylib`. This should make the library use the application's React copy.
113
+
Vấn đề có thể xảy ra khi sử dụng`npm link`hoặc một cách tương đương nào đó. Trong trường hợp này, bundler của bạn có thể "thấy" hai Reacts — một trong thư mục ứng dụng và một trong thư mục thư viện. Giả sử `myapp`và`mylib`thư mục anh em (sibling folders), một cách có thể sửa là chạy `npm link ../myapp/node_modules/react`từ`mylib`. Diều này sẽ làm cho thư viện sử dụng bản React của ứng dụng.
115
114
116
-
>Note
115
+
>Ghi chú
117
116
>
118
-
>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')`resolves differently between the component and the `react-dom`copy it was rendered with.
117
+
>Nhìn chung, React hỗ trợ sử dụng nhiều phiên bản độc lập trong một trang (ví dụ, nếu một ứng dụng và một ứng dụng nhỏ từ bên thứ ba cùng sử dụng nó). Nó chỉ không chạy khi `require('react')`giải quyết một cách khác nhau giữa component và`react-dom`phiên bản mà nó được xuất cùng với.
119
118
120
-
## Other Causes {#other-causes}
119
+
## Những nguyên nhân khác {#other-causes}
121
120
122
-
If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
121
+
Nếu khó cách nào giải quyết được, Vui lòng bình luận trong [this issue](https://github.com/facebook/react/issues/13991)và chúng tôi sẽ cố gắng hỗ trợ. Hãy cố gắng tạo một ví dụ tương tự — bạn có thể tìm ra được vấn đề mà bạn mắc phải .
0 commit comments