diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 783d1b3855..2b45c478a8 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -1,39 +1,39 @@ --- -title: Unknown Prop Warning +title: 警告:未知的 Prop 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. +当你尝试用一个无法被 React 识别为合法 DOM 属性(attribute / property)的 prop 渲染 DOM 元素时,会出现 unknown-prop 警告。你应该确保你的 DOM 元素上没有这类失效的 props。 -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)` 吗?你的组件会直接把它自己的 props 传递给子元素(例如 [传递 props](/docs/transferring-props.html))。向子组件传递 props 时,你应该避免转发本应由父组件解释的 props。 -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 元素上,请参考 [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) 使用自定义的 data 属性。 -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 组件但是没有使用大写,React 会将其解释为 DOM 标签,这是因为 [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: +要解决这个问题,组合组件应该“消费掉”任何只用于复合组件而不是子组件的 prop。例如: -**Bad:** Unexpected `layout` prop is forwarded to the `div` tag. +**Bad:** `layout` prop 意外转发给了 `div` 标签。 ```js function MyDiv(props) { if (props.layout === 'horizontal') { - // BAD! Because you know for sure "layout" is not a prop that