reactjs React 包装器：React 无法识别 DOM 元素上的 `staticContext` 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49358560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React wrapper: React does not recognize the `staticContext` prop on a DOM element
提问by Nicolas Widart
I'm trying to create a wrapper component around the react-router-dom NavLinkcomponent.
我正在尝试围绕 react-router-domNavLink组件创建一个包装器组件。
I would like my custom component to accept all of NavLinks props, and proxy them down to NavLink.
我希望我的自定义组件接受所有 NavLinks 道具，并将它们代理到NavLink.
However when I do this, I'm getting:
但是，当我这样做时，我得到：
Warning: React does not recognize the
staticContextprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasestaticcontextinstead. If you accidentally passed it from a parent component, remove it from the DOM element.
警告：React 无法识别
staticContextDOM 元素上的prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写staticcontext。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。
A working demo of the issue can be found here:
可以在此处找到该问题的工作演示：
回答by Khoa
There is a way to overcome that is using:
有一种克服方法是使用：
const { to, staticContext, ...rest } = this.props;
So your ...restwill never contain staticContext
所以你...rest永远不会包含staticContext
回答by Nathaniel Hill
This is a common problem with a simple solution as documented in the React documentation:
这是React 文档中记录的简单解决方案的常见问题：
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.
The spread operator can be used to pull variables off props, and put the remaining props into a variable.
如果您尝试使用 React 未识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素，则会触发 unknown-prop 警告。你应该确保你的 DOM 元素没有浮动的虚假道具。
展开运算符可用于将变量从 props 中拉出，并将剩余的 props 放入变量中。
function MyDiv(props) {
const { layout, ...rest } = props
if (layout === 'horizontal') {
return <div {...rest} style={getHorizontalStyle()} />
} else {
return <div {...rest} style={getVerticalStyle()} />
}
}
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 对象中删除道具，因为该对象应该被认为是不可变的。
function MyDiv(props) {
const divProps = Object.assign({}, props);
delete divProps.layout;
if (props.layout === 'horizontal') {
return <div {...divProps} style={getHorizontalStyle()} />
} else {
return <div {...divProps} style={getVerticalStyle()} />
}
}
回答by Seph Reed
The given answer by the React docs was not quite good enough for my situation, so I found/developed one which isn't perfect, but is at least not so much of a hassle.
React 文档给出的答案对我的情况来说不够好，所以我发现/开发了一个并不完美的答案，但至少不是那么麻烦。
You can see the Q/A in which it arose here: What is Reacts function for checking if a property applies?
你可以在这里看到它出现的问答： What is Reacts function for checks if a property apply?
The gist is, use a function to pick the bad props out for you.
要点是，使用一个函数为你挑选出不好的道具。
const SPECIAL_PROPS = [
"key",
"children",
"dangerouslySetInnerHTML",
];
const defaultTester = document.createElement("div")
function filterBadProps(props: any, tester: HTMLElement = defaultTester) {
if(process.env.NODE_ENV !== 'development') { return props; }
// filter out any keys which don't exist in reacts special props, or the tester.
const out: any = {};
Object.keys(props).filter((propName) =>
(propName in tester) || (propName.toLowerCase() in tester) || SPECIAL_PROPS.includes(propName)
).forEach((key) => out[key] = props[key]);
return out;
}
Personally, I felt that the warning was completely useless in the first place, so I added a line which skips the check entirely when not in development mode (and warnings are suppressed). If you feel that the warnings have merit, just remove the line:
就我个人而言，我觉得一开始警告完全没有用，所以我添加了一行，在不处于开发模式时完全跳过检查（并且警告被抑制）。如果您觉得这些警告有价值，只需删除该行：
if(process.env.NODE_ENV !== 'development') { return props; }
if(process.env.NODE_ENV !== 'development') { return props; }
You can use it like this:
你可以这样使用它：
public render() {
const tooManyProps = this.props;
const justTheRightPropsForDiv = filterBadProps(tooManyProps);
const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));
return (<div {...justTheRightPropsForDiv}>
<span {...justTheRightPropsForSpan} />
</div>)
}
回答by Artur Carvalho
If someone has this issue with react-admin, check if you don't have a Link as a child of Admin. Like this:
如果有人对 react-admin 有此问题，请检查您是否没有作为 Admin 的孩子的链接。像这样：
<Admin layout={props => <Layout/>}>
<Link to="/something">something</Link> <-- causing issue
</Admin>
Just move it to another component. For instance, inside the Layout.
只需将其移动到另一个组件即可。例如，在布局内部。
