React 包装器：React 无法识别 DOM 元素上的 `staticContext` 道具

Question

我正在尝试围绕 react-router-dom NavLink 组件创建一个包装器组件。

我希望我的自定义组件接受所有 NavLinks 道具，并将它们代理到 NavLink。

然而，当我这样做时，我得到：

Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext instead. If you accidentally passed it from a parent component, remove it from the DOM element.

可以在此处找到该问题的工作演示：

https://codesandbox.io/s/w0n49rw7kw

Answer 1

有一种方法可以克服这个问题：

const { to, staticContext, ...rest } = this.props;

所以你的 ...rest 永远不会包含 staticContext

Answer 2

这是React documentation中记录的简单解决方案的常见问题：

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.

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.

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()} />
  }
}

Answer 3

React 文档给出的答案对我的情况来说不够好，所以我 found/developed 一个不完美的答案，但至少没有那么麻烦。

您可以在此处查看它出现的 Q/A： What is Reacts function for checking if a property applies?

要点是，使用函数为您挑选出不好的道具。

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;
}

就个人而言，我觉得警告一开始就完全没用，所以我添加了一行，当不在开发模式下时完全跳过检查（并且警告被抑制）。如果您觉得这些警告有价值，只需删除以下行：

if(process.env.NODE_ENV !== 'development') { return props; }

你可以这样使用它：

public render() {
    const tooManyProps = this.props;
    const justTheRightPropsForDiv = filterBadProps(tooManyProps);
    const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));

    return (<div {...justTheRightPropsForDiv}>
        <span {...justTheRightPropsForSpan} />
    </div>)
}

Answer 4

如果有人对 react-admin 有这个问题，请检查您是否没有 Link 作为 Admin 的子级。像这样：

<Admin layout={props => <Layout/>}>
  <Link to="/something">something</Link> <-- causing issue
</Admin>

只需将其移动到另一个组件即可。例如，在布局内部。

Answer 5

发生这种情况是因为您可能在组件的某处使用了 {...props}。

示例来自 React：

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

我们单独抓取layout，这样它就不会包含在{...rest}中了。

Answer 6

I got the same issue when passing data in chaild component with camelCase 
property.

Warning: React does not recognize the `moreInfo` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `moreinfo` instead. If you accidentally passed it 
from a parent component, remove it from the DOM element.

 <CenteredModal
      moreInfo={viewType}
 />

 To fix that error, i used all lowercase letters for property.
 <CenteredModal
      moreinfo={viewType}
 />

React 包装器：React 无法识别 DOM 元素上的 `staticContext` 道具

React wrapper: React does not recognize the `staticContext` prop on a DOM element

reactjs

react-router

react-router-dom