Skip to content

Commit

Permalink
Merge pull request #132 from mohshbool/warnings/unknown-prop
Browse files Browse the repository at this point in the history
translated warnings/unknown-props
  • Loading branch information
Fcmam5 committed Jul 8, 2019
2 parents 54f2928 + 87ee5db commit c1425ca
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions content/warnings/unknown-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ 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.
ุณูŽูŠูุทู„ู‚ ุชุญุฐูŠุฑ ุฎุงุตูŠุฉ-ุบูŠุฑ-ู…ุนุฑูˆูุฉ "unknown-prop" ุฅู† ู‚ูู…ุช ุจู…ุญุงูˆู„ุฉ ุชุตูŠูŠุฑ ุนู†ุตุฑ DOM ู…ุน ุฎุงุตูŠุฉ ู„ู… ูŠูุชูŽุนุฑู‘ูŽู ุนู„ูŠู‡ุง ู…ู† ู‚ูุจูŽู„ React ูƒุฎุงุตูŠุฉ DOM ู‚ุงู†ูˆู†ูŠุฉ. ุนู„ูŠูƒ ุงู„ุชู‘ุฃูƒุฏ ู…ู† ุฃู† ุนู†ุงุตุฑ DOM ุฎุงุตุชูƒ ู„ูŠุณ ู„ุฏูŠู‡ุง ุฎูˆุงุต ุทูููŠู„ูŠู‘ุฉ.

There are a couple of likely reasons this warning could be appearing:
ู‡ูู†ุงูƒ ุจุถุนุฉ ุฃุณุจุงุจ ุดุงุฆุนุฉ ุฃูุฎุฑู‰ ู‚ุฏ ุชูุธู‡ุฑ ุงู„ุชุญุฐูŠุฑ:

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.
1. ู‡ู„ ุชุณุชุฎุฏู… `{...this.props}` ุฃูˆ `cloneElement(element, this.props)`ุŸ ูŠูŽู†ู‚ู„ ู…ููƒูˆู‘ู†ูƒ ุฎูˆุงุตูู‡ ู…ูุจุงุดุฑุฉู‹ ุฅู„ู‰ ุงู„ู…ููƒูˆู‘ู† ุงู„ุฅุจู† ([ู†ู‚ู„ ุงู„ุฎูˆุงุต "transferring props"](/docs/transferring-props.html)). ุนู†ุฏ ู†ู‚ู„ ุงู„ุฎูˆุงุต ุฅู„ู‰ ู…ููƒูˆู‘ู† ุฅุจู† ูŠู†ุจุบูŠ ุนู„ูŠูƒ ุงู„ุชุฃูƒุฏ ุฃู†ู‘ู‡ ู„ู… ูŠุชู… ู†ู‚ู„ ุฎูˆุงุต ู…ู† ุงู„ู…ููุชุฑุถ ุฃู† ุชูููŽุณู‘ุฑ ู…ู† ู‚ูุจูŽู„ ุงู„ู…ููƒูˆู‘ู† ุงู„ุฃุจ ุฅู„ู‰ ู…ูƒูˆู‘ู† ุฅุจู†

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).
2. ุชุณุชุฎุฏู… ุฎูˆุงุต DOM ุบูŠุฑ ู‚ูŠุงุณูŠุฉ ุนู„ู‰ ุนูู‚ุฏุฉ DOM ุฃุตู„ูŠุฉ ุฑุจู…ุง ู„ุนุฑุถ ุจูŠุงู†ุงุช ู…ูุฎุตุตุฉ. ุฅู† ูƒูู†ุช ุชูุญุงูˆู„ ุฑุจุท ุจูŠุงู†ุงุช ู…ูุฎุตุตุฉ ุจูุนูู†ุตุฑ DOM ุชู‚ู„ูŠุฏูŠ ูุนู„ูŠูƒ ุจุงุณุชุฎุฏุงู… ุฎุงุตูŠุฉ ุจูŠุงู†ุงุช ู…ูุฎุตุตุฉ "custom data attribute" ูƒูŽู…ุง ุดูุฑูุญูŽุช [ุนู„ู‰ MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).

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.
3. ู„ุง ุชุชุนุฑู‘ู React ุนู„ู‰ ุงู„ุฎุงุตูŠุฉ ุงู„ุชูŠ ุญุฏุฏุชู‡ุง. ุณูŠุชู… ุบุงู„ุจู‹ุง ุฅุตู„ุงุญ ุฐู„ูƒ ููŠ ู†ูุณุฎุฉ ู…ูุณุชู‚ุจู„ูŠุฉ ู…ู† React. ุนู„ู‰ ุฃูŠุฉ ุญุงู„ ุŒ ุชูุฒูŠู„ React ุญุงู„ูŠู‹ุง ุฌู…ูŠุน ุงู„ุฎูˆุงุต ุงู„ุบูŠุฑ ู…ุนุฑูˆูุฉ ุŒ ู…ู…ุง ูŠุนู†ูŠ ุฃู† ุชุญุฏูŠุฏู‡ู… ููŠ ุชุทุจูŠู‚ React ุฎุงุตูŠูƒ ู„ู† ูŠุคุฏูŠ ุฅู„ู‰ ุชุตูŠูŠุฑู‡ู….

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).
4. ุชุณุชุฎุฏู… ู…ููƒูˆู‘ู† React ุจุฏูˆู† ุญุฑูˆู ูƒุจูŠุฑุฉ "upper case". ุชููุณู‘ุฑ React ุงู„ู…ููƒูˆู† ุฅู„ู‰ ูˆูŽุณู… "DOM tag" ู„ุฃู†ู‘ [ุชุญูˆูŠู„ React JSX ูŠุณุชุฎุฏู… ู…ูŠุซุงู‚ ุงู„ุญุฑูˆู ุงู„ูƒุจูŠุฑุฉ ู…ูู‚ุงุจู„ ุงู„ุญุฑูˆู‚ ุงู„ูƒุจูŠุฑุฉ ู„ู„ุชู…ูŠุฒ ุจูŠู† ุงู„ู…ููƒูˆู‘ู†ุงุช ุงู„ุชูŠ ูŠูุนุฑู‘ูู‡ุง ุงู„ู…ูุณุชุฎุฏู… ูˆูŽูˆูุณูˆู… 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:
ู„ุฅุตู„ุงุญ ุฐู„ูƒ ุŒ ูŠู†ุจุบูŠ ุนู„ู‰ ุงู„ู…ููƒูˆู‘ู†ุงุช ุงู„ู…ูุฑูŽูƒูุจุฉ ุฃู† ุชุณุชู†ูุฐ ุฃูŠ ุฎุงุตูŠู‘ุฉ ู…ู‚ุตูˆุฏุฉ ู„ู‡ุง ูˆู„ูŠุณ ู„ู„ู…ููƒูˆู‘ ุงู„ุฅุจู†. ูƒู…ุซุงู„:

**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
**ุณูŠู‘ุฆ:** ุชู…ุฑูŠุฑ ุฎุงุตูŠุฉ `layout` ุบูŠุฑ ุงู„ู…ูุชูˆูุนุฉ ุฅู„ู‰ ูˆูŽุณู… `div`.

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

**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
**ุฌูŠู‘ุฏ:** ูŠูู…ูƒู† ุงุณุชุฎุฏุงู… ุนุงู…ู„ ุงู„ุงู†ุชุดุงุฑ "speard operator" ู„ุฃู†ุชุฒุงุน ุฎูˆุงุต ูˆุชุนูŠูŠู† ุงุงู„ุฎูˆุงุต ุงู„ู…ูุชุจู‚ูŠุฉ ุฅู„ู‰ ู…ูุชุบูŠู‘ุฑ.

```js
function MyDiv(props) {
Expand All @@ -46,7 +46,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.
**ุฌูŠู‘ุฏ:** ูŠูู…ูƒู†ูƒ ุฃูŠุถู‹ุง ุชุนูŠูŠู† ุงู„ุฎูˆุงุต ุฅู„ู‰ ูƒุงุฆู† ุฌุฏูŠุฏ ูˆู…ูŽุญูˆ ุงู„ู…ูุงุชูŠุญ ุงู„ุชูŠ ุชุณุชุฎุฏูู…ูู‡ุง ู…ู† ุงู„ูƒุงุฆู† ุงู„ุฌุฏูŠุฏ. ุชุฃูƒู‘ุฏ ู…ู† ุนุฏู… ู…ุญูˆ ุงู„ุฎูˆุงุต ู…ู† ุงู„ูƒุงุฆู† `this.props` ุงู„ุฃุตู„ูŠ ู„ุฃู† ุฐู„ูƒ ุงู„ูƒุงุฆู† ู…ู† ุงู„ู…ูุฑูˆุถ ุฃู„ู‘ุง ูŠุชุบูŠุฑ.

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

0 comments on commit c1425ca

Please sign in to comment.