Skip to content

translate warnings/unknown-prop.md #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions content/warnings/unknown-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,44 @@ title: Unknown Prop Warning
layout: single
permalink: warnings/unknown-prop.html
---
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

There are a couple of likely reasons this warning could be appearing:
Cảnh báo unknown-prop sẽ xuất hiện nếu bạn đang cố gắng để render một DOM element với một prop không được React công nhận như một thuộc tính(attribute/property) DOM
hợp pháp.Bạn nên đảm bảo rằng các DOM elements của bạn không có các props giả mạo trôi nổi xung quanh.

1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. [transferring props](/docs/transferring-props.html)). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
Có một số lý do có thể khiến cho cảnh báo này xuất hiện:

2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
1. Bạn có đang sử dụng `{...this.props}` hoặc `cloneElement(element, this.props)` không? Component của bạn đang chuyển các props của chính nó sang một element con
(ví dụ: [transferring props](/docs/transferring-props.html)). Khi chuyển các props sang một component con, bạn nên đảm bảo rằng bạn không vô tình chuyển tiếp các props
được component cha dự định thông dịch.

3. 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.

4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
2. Bạn đang sử dụng một thuộc tính DOM không tiêu chuẩn trên một DOM node gốc, có lẽ là đại diện cho một data tùy chỉnh. Nếu bạn đang cố gắng đính kèm data tùy chỉnh
vào một DOM element tiêu chuẩn, bạn có thể xem xét sử dụng thuộc tính data tùy chỉnh như đã được mô tả trên [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).

3. React chưa thể nhận ra thuộc tính mà bạn đã chỉ định. Điều này có thể được khắc phục trong một phiên bản React mới trong tương lai. Tuy nhiên, React hiện tại sẽ
loại bỏ tất cả các thuộc tính không được xác định, vì vậy việc bạn chỉ định chúng trong ứng dụng React của bạn sẽ khiến chúng không được render.

4. Bạn đang sử dụng một React component mà không có chữ hoa. React sẽ hiểu nó như một thẻ DOM bởi vì [React JSX Transform sử dụng quy ước chữ hoa và chữ thường để phân biệt giữa các components do người dùng tự định nghĩa và các thẻ DOM](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).

---

To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
Để khắc phục điều này, các composite components nên "sử dụng hết" bất kỳ prop nào dành cho composite component và không dành cho component con. Ví dụ:

**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
**Tệ:** Prop `layout` không mong muốn đã được chuyển tiếp đến thẻ `div`.

```js
function MyDiv(props) {
if (props.layout === 'horizontal') {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
// TỆ! Bởi vì bạn biết chắc chắn rằng "layout" không phải là một prop mà thẻ <div> có thể hiểu được.
return <div {...props} style={getHorizontalStyle()} />
} else {
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
// TỆ! Bởi vì bạn biết chắc chắn rằng "layout" không phải là một prop mà thẻ <div> có thể hiểu được.
return <div {...props} style={getVerticalStyle()} />
}
}
```

**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
**Tốt:** Toán tử spread có thể được sử dụng để lấy ra các biến trong props ra và đặt lại các props còn lại vào một biến.

```js
function MyDiv(props) {
Expand All @@ -46,7 +53,7 @@ function MyDiv(props) {
}
```

**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
**Tốt:** Bạn có thể gán các props cho một object mới và xóa các keys mà bạn đang sử dụng ra khỏi object mới. Đảm bảo rằng bạn không xóa các props ra khỏi object `this.props` ban đầu, vì object đó sẽ được coi là bất biến/không thể thay đổi (immutable)

```js
function MyDiv(props) {
Expand Down