reactjs 我应该如何使用React为多个元素设置基于元素id的随机背景？

vwhgwdsa 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(112)

因此，我在React应用程序中安装了一个Swiper。我的Swiper有n张幻灯片。对于n张幻灯片中的每一张，我都有一组m图像设置为背景。在每个onload事件中，我希望React应用程序根据每张幻灯片的id随机选择背景。
在我做出React之前，我已经用普通的JS编写了我想要的程序（我把它放在下面，它不知何故工作了，但这不是最后一个版本，所以我不确定，对不起，但没关系）。
'

function ChooseBG() {
// counts the number of slides in swiper
    let countSlides = document.querySelectorAll('.swiper-slide').length;
     // preset array for number of fotos for each slide to choose from written in order of slide number
    const CaseFotos = [2, 3, 3, 5, 8, 8, 2, 1, 2, 4, 5, 4, 7, 18, 4, 5, 3, 6, 4, 3, 5, 19];
    
for (let i=1; i <= countSlides; i++) {
    let randomCaseNumber = Math.floor(Math.random() * (CaseFotos[i-1]));
    let randomFotoLink = "url('../media/casual/selected/cas-" + i +"-" + randomCaseNumber +".jpg')";
    return document.getElementById("case"+i).style.backgroundImage = randomFotoLink; 
};
};

'
一切都很糟糕，有一些延迟，我决定转移到React。下面是我在react应用中的swiper临时代码。所以在我的想象和我对的解释中，它应该如何更好地在React中我应该写一个类似于上面的函数，它将通过元素的id生成随机背景，要求函数返回结果。如何？
'

import React from 'react';
import MainSlide from './MainSwiperSlide';
import { Swiper, SwiperSlide } from 'swiper/react';

//the index of imported images named by the template case0v0 case0v1 case1v0 case1v1 etc 
import SwiperImagesStack from './media/swiper-images/SwiperImagesIndex';
 
export default function MainSwiper() {

MyStyleFunctionForID() { }

return (
  
      <Swiper
        speed={900}
        slidesPerView={1}
        loop
        className="MainSwiper"
        >
          <SwiperSlide className='SwiperSlide' id="case0" >
              <MainSlide SlideText="SOME TEXT CASE 0" style={{MyStyleFunctionForID()}}/>
          </SwiperSlide>
          <SwiperSlide className='SwiperSlide' id="case1" style={{MyStyleFunctionForID()}}>
              <MainSlide SlideText="SOME ANOTHER TEXT CASE 1" />
          </SwiperSlide>
          <SwiperSlide className='SwiperSlide' id="case2" style={{MyStyleFunctionForID()}}>
              <MainSlide SlideText="SOME ANOTHER TEXT CASE 2" />
          </SwiperSlide>
          <SwiperSlide className='SwiperSlide' id="case3" style={{MyStyleFunctionForID()}}>
              <MainSlide SlideText="SOME ANOTHER TEXT CASE 3" />
          </SwiperSlide>
          <SwiperSlide className='SwiperSlide' id="case4" style={{MyStyleFunctionForID()}}>
              <MainSlide SlideText="SOME ANOTHER TEXT CASE 4" />
          </SwiperSlide>
         
      </Swiper>

  
  );
}

'
提前感谢!!!
我在编程和react方面还很年轻，我搜索了一个晚上，我试过refs，我试过hook，但是都不管用

reactjs

来源：https://stackoverflow.com/questions/74877708/how-should-i-use-react-to-set-a-random-background-based-on-element-id-for-multip

1条答案

按热度按时间

jgwigjjp1#

嗯，在我的朋友Vova的帮助下，我可能决定了这个问题（它工作，但是，我想使代码更好！）
因此，首先我在一个单独的js文件中创建图像数组的数组

import cas0V0 from './cas-0-0.jpg';
import cas0V1 from './cas-0-1.jpg';
import cas0V2 from './cas-0-2.jpg';
import cas0V3 from './cas-0-3.jpg';
import cas0V4 from './cas-0-4.jpg';
import cas0V5 from './cas-0-5.jpg';
import cas1V0 from './cas-1-0.jpg';
import cas1V1 from './cas-1-1.jpg';
import cas2V0 from './cas-2-0.jpg';
import cas2V1 from './cas-2-1.jpg';
import cas2V2 from './cas-2-2.jpg';
const s0 = [cas0V0, cas0V1, cas0V2, cas0V3, cas0V4, cas0V5];
const s1 = [cas1V0, cas1V1];
const s2 = [cas2V0, cas2V1, cas2V2];

const SwiperImagesStack = [
  s0, s1, s2]
;

export default SwiperImagesStack;

下面是我在React应用中写的内容：

export default function MainSwiper() {
  const numberOfSlide = 3
  const CaseFotos = Array.from(Array(numberOfSlide).keys());
  const mybg = (index) => ({ backgroundImage: `url('${SwiperImagesStack[index][Math.floor(Math.random() * (SwiperImagesStack[index].length))]}')` })    

  return (
    <Swiper
      modules={[Navigation, EffectFade]}
      navigation
      speed={900}
      slidesPerView={1}
      loop
      className="MainSwiper">
        {CaseFotos.map((index) => 
          <SwiperSlide className='SwiperSlide'  id={`case${index}`} style={mybg(index)} >
            <MainSlide SlideText={`SOME TEXT CASE' ${index}`} key={'key1'} />
          </SwiperSlide>)}
    </Swiper> 
  );
}

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 我应该如何使用React为多个元素设置基于元素id的随机背景？

1条答案

相关问题

热门标签

最新问答