reactjs React无法识别DOM元素上的X prop

fjaof16o  于 5个月前  发布在  React
关注(0)|答案(4)|浏览(73)

我是初学者开发人员,我正在进行React(盖茨比,TS,样式组件)项目。我得到这个错误:
“React无法识别DOM元素上的isOpen prop。如果您有意让它作为自定义属性出现在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的东西或东西。也许有人可以帮助我,并解释这个错误的原因。

cig3rfwq

cig3rfwq1#

当这种情况发生时,这是因为传递给样式化组件的所有props也会传递给您正在样式化的DOM元素。
您可能有一个类似于以下内容的组件:

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

字符串
要解决这个问题,您可以重构样式化组件定义,并仅显式地将所需的prop传递给要样式化的元素。使用匿名函数组件并解构您不想传递给DOM元素的prop,并分散其余的prop。这确保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细节/警告,请参阅文档。

ki1q1bka

ki1q1bka2#

对于样式化的组件v5.1,你也可以通过在它前面加上一个美元符号($)并将它指定为transient prop来防止不需要的props被传递到你的React节点:

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

字符串
docs

tvz2xvvm

tvz2xvvm3#

你应该像文档推荐的那样使用shouldForwardProp

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

字符串

wmvff8tz

wmvff8tz4#

这样使用$:

const SvgStyled = styled(SVG)<{ $isOpen: boolean }>`
  // your CSS stuff
`;

字符串

相关问题