如何使用样式组件和reactjs添加自定义css？警告:接收为非布尔属性isfirstimage附件的false
如何使用样式组件和reactjs添加自定义css？警告:接收为非布尔属性isfirstimage附件的false
提问于 2022-06-27 21:37:13
我喜欢添加基于道具的样式。
import {ArrowBackIcon} from './styles';
const App = () => {
...
const isFirstImageAttachment = (index) => {
return (
filteredImages.length &&
filteredImages[0]?.uuid === attachments[index]?.uuid
);
};
...
return (
<div className="App">
...
<ArrowBackIcon
isfirstimageattachment={isFirstImageAttachment(idx)}
onClick={clickBackAttachment}
/>
...
</div>
);
};
)styles.js
export const ArrowForwardIcon = styled(ForwardArrowIcon)`
...
display: ${props => (props.isfirstimageattachment ? 'none' : 'block')}; ;
`;isFirstImageAttachment应该返回true或false，因此根据该值，我喜欢隐藏或显示ArrowForwardIcon组件。
我说Warning: Received false for a non-boolean attribute isfirstimageattachment.If you want to write it to the DOM, pass a string instead: isfirstimageattachment="false" or isfirstimageattachment={value.toString()}时出错了
我不想做isfirstimageattachment="false"，因为isfirstimageattachment并不总是返回false。而且，这个函数不返回string，所以isfirstimageattachment={value.toString()}不能按照我想要的方式工作。
有什么我能做的吗？
尝试
我想出的是，即使我传递了string false样式也没有改变。
return (
<div className="App">
...
<ArrowBackIcon
isfirstimageattachment="false"
onClick={clickBackAttachment}
/>
...
</div>我看到元素得到了应用，display: none;，这不是为样式组件提供支持的方式吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-10 16:42:42
import {ArrowBackIcon} from './styles';
const App = () => {
...
const isFirstImageAttachment = (index) => {
const showEl = filteredImages.length &&
filteredImages[0]?.uuid === attachments[index]?.uuid;
return showEl ? 'hidden' : 'visible';
};
...
return (
<div className="App">
...
<ArrowBackIcon
isfirstimageattachment={isFirstImageAttachment(idx)}
/>
...
</div>
);
};
)styles.js
export const ArrowBackIcon = styled(BackArrowIcon)`
visibility: ${props => props.isfirstimageattachment};
`;我能够通过这种方式动态地添加样式！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72778550
复制相关文章
相似问题
腾讯云开发者
