Блог

У меня есть слайд-шоу, основанное на массиве объектов с его характеристиками, один из которых является background-color текущим слайдом. У меня есть свойство, bg которое его хранит. Это то, что я использую для установки каждого цвета фона, который изменяется для каждого изображения, однако я использую inline 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]);
 

Ну, в этом случае должно быть хорошо использовать встроенный стиль.

Кроме того, вы можете сделать что-то вроде:

 {
  ...
  bgClass: 'red'
}
 

добавьте этот класс в элемент div:

 <div className={`classes.MinorSlider_subContainer ${minorSlides[minorSlideImg].bgClass}`} />
 

и оформите его в конце:

 .red {
  background: 'red';
}
 

Или вы можете попробовать использовать ссылку

 const ref = useRef()

useEffect(() => {
  if (ref.current == null) {
    return
  }

  ref.current.style.backgroundColor = minorSlides[minorSlideImg].bg
}, [minorSlideImg, ref])

<div ref={ref} />
 

Вот мои решения для того же. Кроме того, я добавляю цвета в список и использую функцию rand .

Вот список цветов

  const color_list = [
    "tomato",
    "blueviolet",
    "cornflowerblue",
    "indianred",
    "MediumAquaMarine",
    "MediumPurple",
    "Rebeccapurple",
    "sandybrown",
    "seagreen",
    "palevioletred",
    "lightsteelblue",
    "Gold",
    "teal",
  ];
 

Я создаю переменную и добавляю к ней случайную функцию, чтобы выбрать набор цветов.

 const rando_color = color_list[Math.floor(Math.random() * color_list.length)];
 

Просто передайте переменную в опции style в теге html div, чтобы динамически назначать цвет фона

 <div
   p={4}
   style={{
   backgroundColor: rando_color, // Added variable here 
   fontFamily: "Oswald",
   border: "solid 2px white",
   }}
   >
<h1>Some Content</h1>
  </div>
 

Чтобы упростить задачу, просто добавьте переменную непосредственно в тег без каких-либо фигурных скобок. Также вы можете попробовать использовать эту переменную в состоянии react для лучшей загрузки. Добавьте также реквизит по умолчанию.