如何在样式化组件中保留自定义属性？答案

【问题标题】：How to keep custom attribute in styled component?如何在样式化组件中保留自定义属性？
【发布时间】：2020-01-30 23:17:05
【问题描述】：

我创建了一个带有自定义属性test 的简单样式组件，但是在渲染时，test 属性只是没有出现在 div dom 中，发生了什么？

const StyledDiv = styled.div<{
    test?: boolean;
}>`
    color:red;
`;

//in render function...
<StyledDiv test>it's just test</StyledDiv>

【问题讨论】：

【解决方案1】：

在 React 中，布尔值未传递给 dom 元素意味着 test 或 test={true} 将不可用于 dom。它只支持string、number 和object 三种类型，它会将它们转换为string，所以您需要做的就是将它也更改为test=""，它会起作用。

如果您希望访问组件中的 test 属性，您需要执行以下操作：

const StyledDiv = styled.div`
    color: ${({test}) => test ? 'red' : 'blue'};
`;

【讨论】：

如果我希望 test 出现在该 dom 上该怎么办。因为我有一个选择器可以通过该属性访问该 dom
用它传递一个值 react 不支持类似这样的布尔值：test="" 可以。我也会改变我的答案。
dom 上还没有得到test，最终的dom 是这样的<div class="sc-fzXfLO bJxAYn">it's just test</div>。我想要的是<div class="sc-fzXfLO bJxAYn" test="">it's just test</div>。它看起来样式组件只保留HTMLAttributes，所以如果我使用data-test，它可以保留。