React在DOM元素上不识别X属性。

Question

我是一位初学者开发人员，正在开发一个基于React ( Gatsby, TS, styled components )的项目。我遇到了这个错误：

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

我相信我错过了某些基本的React知识或其他内容。也许有人能帮助我解释这个错误的原因。

- Dovtutis

---

你能在问题中分享 SvgStyled 组件的代码吗？ - Drew Reese

const SvgStyled = styled(Svg)<{ isOpen: boolean }> transition: 0.3s; cursor: pointer; ${({ isOpen }) => isOpen &&transform: rotate(90deg);`}; &:hover { ${({ isOpen }) => isOpen ? transform: rotate(90deg); : transform: scale(0.98);}; } `; - Dovtutis

Answer 1

当发生这种情况时，是因为传递给样式化组件的所有属性也会传递给您正在样式化的DOM元素。

您可能有一个类似以下的组件：

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

为解决这个问题，您需要重构样式组件定义，并明确地将只想传递给被样式化元素的 props 传递进去。使用一个匿名函数组件并解构您不想传递到 DOM 元素的 prop，以及展开其余的 props。这可以确保 styled-components 创建的 CSS 类所需的className prop 被传递。

示例：

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细节/注意事项，请参见文档。

- Drew Reese

Answer 2

自 v5.1 版本的 styled components 开始，你可以通过给属性名添加美元符号（$）并将其指定为瞬态属性来防止不需要的属性传递到 React 节点中：

const SvgStyled = styled(SVG)<{ $isOpen: boolean }>`
  // your CSS and logic referencing the `$isOpen` prop
`;
// SVG does NOT receive props.$isOpen

文档

- romebop

---

很棒的答案。我认为这是正确的方法，因为v5.1。 - Nelson Fleig

很好，瞬态属性！ - stevevar

Answer 3

您应该按照文档的建议使用shouldForwardProp。

    const SvgStyled = styled(SVG).withConfig({
         shouldForwardProp: (prop) => prop !== 'isOpen',
    })<{ isOpen: boolean }>`
    `;

- Gustavo Magnago