javascript - 如何在 React 中动态设置 CSS 属性(背景颜色)?
问题描述
我有一个基于一组具有其特征的对象的幻灯片,其中一个是background-color
当前幻灯片的。我有一个bg
存储它的属性。这就是我用来设置每个背景颜色的方法,它会更改为每个图像,但是我正在使用 aninline style
来做到这一点。
我想知道是否有办法在不使用这种内联样式的情况下做到这一点?
这是我的代码示例:
import React from 'react'
import { Fragment } from 'react'
import classes from './MainPageHeader.module.css'
const MainPageHeader = props => {
let [minorSlideImg, setMinorSlideImg] = React.useState(0)
let minorSlides = [
{
img: require('../../../assets/images/Header/MinorSlider/imgSolo1-mainpage.png'),
alt: 'Produto 1',
linkText: ['PRODUTO 5', '$ 19.99'],
productId: 5,
bg: 'rgb(151, 105, 105)'
},
{
img: require('../../../assets/images/Header/MinorSlider/imgSolo2-mainpage.png'),
alt: 'Produto 2',
linkText: ['PRODUTO 13', '$ 199.99'],
productId: 13,
bg: '#fad3e0'
},
{
img: require('../../../assets/images/Header/MinorSlider/imgSolo3-mainpage.png'),
alt: 'Produto 3',
linkText: ['PRODUTO 10', '$ 499.99'],
productId: 10,
bg: '#ccc'
},
{
img: require('../../../assets/images/Header/MinorSlider/imgSolo4-mainpage.png'),
alt: 'Produto 4',
linkText: ['PRODUTO 11', '$ 999.99'],
productId: 11,
bg: 'rgb(238, 225, 183)'
},
]
const passSlideHandler = () => {
if (minorSlideImg < minorSlides.length - 1) {
setMinorSlideImg(minorSlideImg + 1)
} else {
setMinorSlideImg(0)
}
}
React.useEffect(() => {
const interval = setTimeout(() => {
passSlideHandler()
}, 5000);
return () => clearTimeout(interval);
});
return (
<Fragment>
<div
className={classes.MinorSlider_subContainer}
style={{backgroundColor: minorSlides[minorSlideImg].bg}} // <= This is what I'd like to remove
>
<img
src={minorSlides[minorSlideImg].img}
alt={"img-1"}
/>
</div>
</Fragment>
)
}
export default MainPageHeader
CSS:
.MinorSlider_subContainer {
height: 65%;
width: 50%;
background-color: #ccc;
}
.MinorSlider_subContainer img {
max-width: 100%;
}
.MinorSlider_subContainer div {
position: relative;
background-color: white;
width: 100%;
height: 65px;
}
.MinorSlider_subContainer div > *{
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
padding-left: 25px;
text-decoration: none;
}
.MinorSlider_subContainer div p {
margin: 0;
color: rgb(75, 75, 75);
}
可以看出,每五秒钟minorSlides
更改一次索引,因此,正在显示的幻灯片也会更改。该索引用于引用当前幻灯片的每个特征。
那么,有没有办法删除这种内联样式并使我的 JSX 更干净?
如果我使用 HTML、CSS 和 JS,我可以使用 JQuery 甚至纯 JS 来做到这一点,但我不知道如何在这里做到这一点。我知道我可以使用循环创建元素,但我想只更改索引而不是整个元素。
这是sildeshow:
解决方案
如果您不能为每种颜色创建一个 css 类,另一种选择是添加style
标签并覆盖该background-color
属性:
const subcontainerBackground = `.${classes.MinorSlider_subContainer} { background-color: ${minorSlides[minorSlideImg].bg}}`
return {(
<Fragment>
<style>
{subcontainerBackground}
</style>
<div className={classes.MinorSlider_subContainer} >
//....
</div>
</Fragment>
}
编辑
您也可以使用Document.createElement()添加样式标签:
useEffect(() => {
const content = `.${classes.MinorSlider_subContainer} { background-color: ${minorSlides[minorSlideImg].bg}}`;
const style = document.createElement("style");
style.innerHTML = content;
document.head.appendChild(style);
return () => document.head.removeChild(style);
}, [minorSlideImg]);
推荐阅读
- r - 如何使用 par(new=T) 在循环中绘图?
- spring - Dynamically set max-messages-per-poll property of pollerMetaData
- sqlite - 使用查询从不同的表中获取信息
- android - 如何在 maxLine TextView 的最后一行应用水平渐变边缘
- python-3.x - Groupby并找出不同之处
- javascript - 5次调用后Ajax获取请求未得到响应
- curl - 通过 java 执行 AsyncHttpClient/curl 命令没有给出正确的结果
- python - 将日期范围拆分为更小的范围
- entity-framework - Entity Framework Core 的 AddRangeAsync() 在通用方法中不起作用
- kubernetes - 新的 macOS 安装 - kubectl 输出错误消息