React 无法识别 DOM 元素上的 X 属性

Posted 2023-03-15

【中文标题】React 无法识别 DOM 元素上的 X 属性

【英文标题】：React does not recognize the X prop on a DOM element

【发布时间】：2021-11-19 09:02:10

【问题描述】：

我是初学者，我正在开发 react（gatsby、TS、样式化组件）项目。我收到此错误：

“React 无法识别 DOM 元素上的 isOpen 属性。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 isopen。如果您不小心从父级传递了它组件，将其从 DOM 元素中移除。”

export const Navigation = () => 
      const [isNavigationOpen, setIsNavigationOpen] = useState(false);
      const  isTablet  = useQuery();
    
      const showNavbar = () => 
        setIsNavigationOpen((previousState) => !previousState);
      ;
    
      const renderElement = isTablet ? (
        <>
          <SvgStyled
            src='bars_icon'
            isOpen=isNavigationOpen
            onClick=showNavbar
          />
          <MobileNavigation isOpen=isNavigationOpen>
            NAVIGATION_DATA.map(( id, url, text ) => (
              <LinkMobile key=id to=url>
                <ExtraSmallParagraph>text</ExtraSmallParagraph>
              </LinkMobile>
            ))
          </MobileNavigation>
        </>
      ) : (
        <FlexWrapper>
          NAVIGATION_DATA.map(( id, url, text ) => (
            <LinkDekstop key=id to=url>
              <ExtraSmallParagraph>text</ExtraSmallParagraph>
            </LinkDekstop>
          ))
        </FlexWrapper>
      );
    
      return renderElement;
    ;

我确信我错过了一些基本的反应东西或其他东西。也许有人可以帮助我并解释这个错误的原因。

【问题讨论】：

您能否分享您问题中的SvgStyled 组件代码？

const SvgStyled = styled(Svg)` transition: 0.3s;光标：指针； $( isOpen ) => isOpen && transform: rotate(90deg);; &:hover $( isOpen ) => isOpen ? transform: rotate(90deg);：transform: scale(0.98);； `;

【参考方案1】：

发生这种情况是因为传递给样式化组件的所有道具随后也传递给了您正在设置样式的 DOM 元素。

您的组件可能如下所示：

const SvgStyled = styled(SVG)< isOpen: boolean >`
  // your CSS and logic referencing the `isOpen` prop
`;

要解决此问题，您需要重构样式化组件定义并仅将您想要的道具显式传递给正在设置样式的元素。使用匿名函数组件并解构你不想传递给 DOM 元素的道具，并传播其余的道具。这可确保 styled-components 为其创建 CSS 类的 className 属性被传递。

例子：

interface SvgStyledProps 
  className?: string,
  isOpen: boolean,


const SvgStyled = styled(( isOpen, ...props) => (
  <Svg ...props />
))<SvgStyledProps>`
  // your CSS and logic referencing the `isOpen` prop
`;

有关styled-components 的任何其他 Typescript 细节/警告，请参阅docs。