提问者:小点点

防止在样式化组件中将道具从子级传递到父级


我正在使用样式组件库与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

在样式化组件中,有什么方法可以防止“泡泡”道具从子级到父级?


共1个答案

匿名用户

样式化组件中没有内置的解决方案,但您可以将其包装到函数组件中,并对不需要的属性进行结构化。

const B = Styled(({isExpanded, ...props})=><A {...props}/>)<BProps>`

您还可以查看关于这个主题的github-issue:https://gitHub.com/styled-components/styled-components/issues/135