React Number Format和Styled Components-传递给DOM的道具

Question

我有一个用样式化组件创建的Input组件：

const Input = styled.input`
${({ boxShadow, theme }) => css`
...
box-shadow: ${boxShadow};
`}
`;

我将其作为一个独立组件使用：

<Input placeholder="Regular input" boxShadow="..." />

以及用于造型的React Number Format组件：

<Input as={NumberFormat} placeholder="Number input" boxShadow="..." />

一切正常，只是当与React Number Format结合使用时，我的Input组件的任何自定义属性都会传递到DOM，React不喜欢它：

警告：React无法识别DOM元素上的boxShadow道具。

有什么方法可以防止React Number Format将我拥有的自定义属性传递到DOM？

Answer 1

取决于您使用的版本，但

如果您想阻止样式组件消耗道具从传递到底层React节点或呈现到DOM元素，可以在道具名称前面加上美元符号($(它变成了一个瞬态道具。

https://styled-components.com/docs/api#transient-道具

如果你想要更精细的过滤，你可以使用shouldForwardProps((