Как сохранить пользовательский атрибут в стилизованном компоненте?

Question

Я создал простой стилизованный компонент с пользовательским свойством test, но при визуализации свойство test просто не появилось в div dom, что случилось?

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

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

Answer 1

В React логическое значение не передается элементу dom, что означает, что test или test={true} не будут доступны для dom. Он поддерживает только три типа string, number и object и преобразует их в string, поэтому все, что вам нужно сделать, это изменить тоже test="", и он будет работать.

Если вы хотите получить доступ к опоре test в вашем компоненте, вам нужно сделать что-то вроде этого:

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