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

Question

我正在使用带有 TypeScript 的样式组件库。当我创建B继承自 React component 的样式组件时遇到问题A。A是 node_module （我无法更改 的行为A）。但A将所有道具传递给div.

如果B有任何道具A没有，警告消息会显示在控制台中，因为div没有属性isExpanded：

警告：React 无法识别isExpandedDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 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

有什么方法可以防止样式组件中从子级到父级的“气泡”道具？

Answer 1

在样式组件中没有针对此问题的内置解决方案，但您可以将其包装到函数组件中并解构不需要的属性。

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

您还可以查看有关此主题的 github-issue：https://github.com/styled-components/styled-components/issues/135