Question

我正在将带样式的组件库与TypeScript一起使用。创建从react组件B继承的样式化组件A时遇到问题。 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

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

Answer 1

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

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

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

防止样式组件中的子项从子项传递到父项

1 个答案: