React报错DOM元素不识别isOpen prop的原因及解决方法咨询

这个警告是React的默认校验逻辑触发的：

• React不会将非HTML标准属性渲染到DOM节点上，如果你直接给<div>、<svg>这类原生DOM标签传递isOpen这类自定义属性，React就会抛出该提示，避免无效属性污染DOM结构。
• 你当前使用styled-components开发样式组件，默认情况下，给styled生成的组件传递的所有自定义prop，只要不是组件本身接收的参数，都会被透传给底层的原生DOM节点。你给SvgStyled和MobileNavigation这两个styled组件传递的isOpen属性，没有被styled-components过滤，直接传到了底层的svg、div等原生标签上，因此触发了警告。

styled-components提供了专门的机制过滤仅用于样式计算的自定义prop，不需要修改属性名成小写的isopen。

方案1：使用瞬态prop（推荐，v5.1及以上版本支持） #

给仅用于样式的自定义prop加上$前缀，styled-components会自动过滤这类前缀的prop，不会透传给底层DOM：

1. 修改现有组件传参代码：

<SvgStyled
  src='bars_icon'
  $isOpen={isNavigationOpen} // 加$前缀
  onClick={showNavbar}
/>
<MobileNavigation $isOpen={isNavigationOpen}> // 加$前缀
  {/* 原有内容不变 */}
</MobileNavigation>

2. 同步修改对应styled组件的样式逻辑里的prop引用：

// 示例：SvgStyled的样式定义
const SvgStyled = styled.svg`
  transform: ${props => props.$isOpen ? 'rotate(90deg)' : 'rotate(0)'};
  // 其余样式不变
`

// 示例：MobileNavigation的样式定义
const MobileNavigation = styled.div`
  display: ${props => props.$isOpen ? 'block' : 'none'};
  // 其余样式不变
`

方案2：显式配置过滤规则 #

如果你不想修改prop名称，也可以在定义styled组件时通过shouldForwardProp手动过滤isOpen属性：

const SvgStyled = styled('svg').withConfig({
  shouldForwardProp: (prop) => prop !== 'isOpen' // 指定isOpen不要透传给DOM
})`
  transform: ${props => props.isOpen ? 'rotate(90deg)' : 'rotate(0)'};
  // 其余样式不变
`
// MobileNavigation组件同理配置即可

内容的提问来源于stack exchange，提问作者Dovtutis