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中记录的简单解决方案的常见问题：

如果您尝试渲染DOM，则会触发unknown-prop警告   具有不被React识别为合法DOM的道具的元素   属性/属性。您应该确保您的DOM元素不会   有虚假的道具漂浮在周围。

扩展运算符可用于从道具中拉出变量，然后放置   将剩下的道具变成变量。

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

您还可以将道具分配给新对象并删除其中的键你正在使用新对象。一定不要删除道具原始的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()} />
  }
}

Answer 3

React文档给出的答案不足以适合我的情况，因此我发现/开发了一个不完美的答案，但至少没有那么麻烦。

您可以在此处查看出现的问题： 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有此问题，请检查您是否没有链接作为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}中。

React包装器：React不识别DOM元素上的`staticContext` prop

5 个答案: