我正在使用样式组件库与TypeScript。当创建从react组件A
继承样式化组件B
时,我遇到了问题。A
是node_module(我无法更改A
的行为)。但是A
将所有道具传递给div
。
如果b
具有a
没有的任何属性,则控制台中会显示警告消息,因为div
没有isexpanded
属性:
警告:React无法识别DOM元素上的isexpanded
属性。如果您有意希望它作为自定义属性出现在DOM中,请将其拼成小写isexpanded
。如果您不小心从父组件传递了它,请将它从DOM元素中移除。
interface AProps {
}
interface BProps {
isExpanded: boolean
}
const A = (props: AProps) => (
<div {...props} />
) // Component A pass all props to <div>
const B = Styled(A)<BProps>`
` // I need isExpaned prop in component B and I would like to interit from A
在样式化组件中,有什么方法可以防止“泡泡”道具从子级到父级?
样式化组件中没有内置的解决方案,但您可以将其包装到函数组件中,并对不需要的属性进行结构化。
const B = Styled(({isExpanded, ...props})=><A {...props}/>)<BProps>`
您还可以查看关于这个主题的github-issue:https://gitHub.com/styled-components/styled-components/issues/135