我是初学者开发人员,我正在进行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的东西或东西。也许有人可以帮助我,并解释这个错误的原因。
4条答案
按热度按时间cig3rfwq1#
当这种情况发生时,这是因为传递给样式化组件的所有props也会传递给您正在样式化的DOM元素。
您可能有一个类似于以下内容的组件:
字符串
要解决这个问题,您可以重构样式化组件定义,并仅显式地将所需的prop传递给要样式化的元素。使用匿名函数组件并解构您不想传递给DOM元素的prop,并分散其余的prop。这确保
styled-components
为其创建CSS类的className
prop被传递。范例:
型
对于
styled-components
的任何其他Typescript细节/警告,请参阅文档。ki1q1bka2#
对于样式化的组件
v5.1
,你也可以通过在它前面加上一个美元符号($
)并将它指定为transient prop
来防止不需要的props被传递到你的React节点:字符串
docs
tvz2xvvm3#
你应该像文档推荐的那样使用
shouldForwardProp
:字符串
wmvff8tz4#
这样使用$:
字符串