Skip to content

Commit 4d67ffb

Browse files
seognilzhaozhiming
authored andcommitted
docs(cn): translate content/warnings/unknown-prop.md into Chinese (#111)
https://stackblitz.com/edit/react-unknown-prop 无法重现这个 warning 可能是我例子写得不够高级…
1 parent becf8a6 commit 4d67ffb

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

content/warnings/unknown-prop.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
---
2-
title: Unknown Prop Warning
2+
title: 警告:未知的 Prop
33
layout: single
44
permalink: warnings/unknown-prop.html
55
---
6-
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.
6+
当你尝试用一个无法被 React 识别为合法 DOM 属性(attribute / property)的 prop 渲染 DOM 元素时,会出现 unknown-prop 警告。你应该确保你的 DOM 元素上没有这类失效的 props
77

8-
There are a couple of likely reasons this warning could be appearing:
8+
这个警告出现的原因可能有如下几种:
99

10-
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.
10+
1. 你使用了 `{...this.props}` 或者 `cloneElement(element, this.props)` 吗?你的组件会直接把它自己的 props 传递给子元素(例如 [传递 props](/docs/transferring-props.html))。向子组件传递 props 时,你应该避免转发本应由父组件解释的 props
1111

12-
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).
12+
2. 你在原生 DOM 节点上使用的是非标准的 DOM 属性,或许是用来表示自定义数据。如果你想把自定义数据附加到标准 DOM 元素上,请参考 [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) 使用自定义的 data 属性。
1313

14-
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.
14+
3. React 还不能识别你指定的属性。这可能会在 React 的未来版本中修复。不过,React 目前会去除所有未知的属性,因此即使在 React 应用中指定这些属性也无法使它们渲染。
1515

16-
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).
16+
4. 你在使用 React 组件但是没有使用大写,React 会将其解释为 DOM 标签,这是因为 [React JSX 语法使用大小写约定来区分用户自定义组件和 DOM 标签](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
1717

1818
---
1919

20-
To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
20+
要解决这个问题,组合组件应该“消费掉”任何只用于复合组件而不是子组件的 prop。例如:
2121

22-
**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
22+
**Bad** `layout` prop 意外转发给了 `div` 标签。
2323

2424
```js
2525
function MyDiv(props) {
2626
if (props.layout === 'horizontal') {
27-
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
27+
// 糟糕的! 因为你很清楚 <div> 不知道如何处理 "layout" 这个 prop
2828
return <div {...props} style={getHorizontalStyle()} />
2929
} else {
30-
// BAD! Because you know for sure "layout" is not a prop that <div> understands.
30+
// 糟糕的! 因为你很清楚 <div> 不知道如何处理 "layout" 这个 prop
3131
return <div {...props} style={getVerticalStyle()} />
3232
}
3333
}
3434
```
3535

36-
**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
36+
**Good** 展开运算符能从 props 中剥离变量,并将剩余的 props 放到一个新变量中。
3737

3838
```js
3939
function MyDiv(props) {
@@ -46,7 +46,7 @@ function MyDiv(props) {
4646
}
4747
```
4848

49-
**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.
49+
**Good** 你也可以将 props 分配给一个新的对象,并从新对象中删除你正在使用的属性。注意不要删除原始对象 `this.props` 中的 props,因为这个对象理应被认为是不可变的。
5050

5151
```js
5252
function MyDiv(props) {

0 commit comments

Comments
 (0)