警告:使用样式组件和react.js接收非布尔属性“`active`”的“`false`”
警告:使用样式组件和react.js接收非布尔属性“`active`”的“`false`”
提问于 2022-08-02 18:35:37
我收到一条错误信息
Warning: Received `false` for a non-boolean attribute `active`.
If you want to write it to the DOM, pass a string instead: active="false" or active={value.toString()}.
If you used to conditionally omit it with active={condition && value}, pass active={condition ? value : undefined} instead.我的代码看起来像这样
index.jsx
import { Container, CalendarIcon } from "./styles";
export default function App() {
const isActive = context => context === activePopover;
return (
<Container>
...
<CalendarIcon active={isActive(POPOVERS.Date)} />
...
</Container>
);
}styles.js
import styled from 'styled-components';
import {default as CalendarRoundIconSvg} from './CalendarRoundIcon.tsx';
export const isActive = active => (active ? `#04435e` : `#9b9fa3`);
export const CalendarIcon = styled(CalendarRoundIconSvg).attrs(({active}) => ({
color: isActive(active),
}))`
`;CalendarRoundIcon.tsx
const CalendarRoundIcon: React.FC<SvgIconProps> = props => {
const {color = 'currentColor'} = props;
return (
<SvgIcon
width="14"
height="14"
viewBox="0 0 14 14"
fill={color}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M4.47109 8.49349H3.51286C3.40199 8.49313 3.29577 8.45107 3.21737 8.37648C3.13897 8.30189 3.09476 8.20082 3.09439 8.09534V7.18363C3.09476 7.07808 3.13895 6.97695 3.21733 6.90225C3.2957 6.82755 3.40192 6.78534 3.51286 6.7848H4.47109C4.58209 6.78534 4.68839 6.82753 4.76688 6.90221C4.84537 6.97689 4.88971 7.07802 4.89027 7.18363V8.09534C4.88971 8.20089 4.84534 8.30195 4.76683 8.37652C4.68832 8.45109 4.58202 8.49314 4.47109 8.49349Z"
fill={color}
/>
</SvgIcon>
);
};
export default memo(CalendarRoundIcon);index.jsx有一个isActive函数，返回布尔值，我将这个函数作为active props传递给样式化的组件。
在样式组件(styles.js)中，还有一个函数基于从index.jsx传递的active props返回颜色十六进制。
最后将颜色传递给图标文件。
我怎样才能摆脱这个警告？
回答 1
Stack Overflow用户
发布于 2022-08-03 15:06:28
在$active上添加CalendarIcon解决了这个问题！
import { Container, CalendarIcon } from "./styles";
export default function App() {
const isActive = context => context === activePopover;
return (
<Container>
...
<CalendarIcon $active={isActive(POPOVERS.Date)} />
...
</Container>
);
}另外，styled.jsx，您需要将单词active改为$active
import styled from 'styled-components';
import {default as CalendarRoundIconSvg} from './CalendarRoundIcon.tsx';
export const isActive = active => (active ? `#04435e` : `#9b9fa3`);
export const CalendarIcon = styled(CalendarRoundIconSvg).attrs(({$active}) => ({
color: isActive($active),
}))`
`;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73212223
复制相关文章
相似问题
腾讯云开发者
