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

Question

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

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

但是，当我这样做时，我得到：

警告：React 无法识别 DOM 元素上的 staticContext 道具。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 staticcontext 代替。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

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

• https://codesandbox.io/s/w0n49rw7kw

原文由 Nicolas Widart 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一种克服的方法是使用：

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

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

原文由 Khoa 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

如果您尝试使用 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()} />
  }
}

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

原文由 Nathaniel Hill 发布，翻译遵循 CC BY-SA 3.0 许可协议