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

【问题标题】：Prevent pass props from child to parent in styled components防止在样式化组件中将道具从子级传递给父级
【发布时间】：2019-07-27 09:34:46
【问题描述】：

我正在使用带有 TypeScript 的样式化组件库。当我创建从反应组件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

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

【问题讨论】：

标签： javascript reactjs typescript inheritance styled-components

【解决方案1】：

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

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

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

【讨论】：