慕村225694
2021-11-25 15:54:09
我有以下svg組件,我在其中傳遞道具。import React from 'react';export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg>);然后我有一個(gè)styled-component看起來(lái)像這樣的。const Icon = styled(_Icon)` ${props => props.isActive && css` transform: rotate(-180deg); `};`;我看到以下react錯(cuò)誤。警告:React 無(wú)法識(shí)別isActiveDOM 元素上的prop。
2 回答
智慧大石
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊
const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
${props =>
props.isActive &&
css`
transform: rotate(-180deg);
`};
`
是不是更簡(jiǎn)單的解決方案,它也可以防止屬性不必要地呈現(xiàn)到 DOM
森欄
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊
我在使用樣式組件時(shí)遇到了同樣的問(wèn)題,最后我做了這樣的事情:
<Icon isactive={isActive.toString()} />
${props =>
props.isactive === 'true' &&
css`
transform: rotate(-180deg);
`};
}
添加回答
舉報(bào)
0/150
提交
取消
