React JS与HTML DOM-JavaScript

如何解决React JS与HTML DOM-JavaScript

我想知道是否存在使用React.js操纵图像样式以制作轮播的方法。我要制作一个图像显示属性，将其更改为“块”，而其余的都不显示在单击按钮上。 我能够仅使用HTML DOM来做到这一点，但想知道是否可以使用React来做到这一点。 这是我的比较代码

在第一组代码中，privateProjects [index] .style.display是未定义的，因为我假设React不会读取HTML DOM所能执行的简单命令。 （设置privateProjects [index] .style.display ='none'）

import React,{useState} from 'react';
import {Link} from 'react-router-dom';
import {Carousel,CarouselItem,CarouselControl,CarouselIndicators,CarouselCaption} from 'reactstrap';
import VodaIIResidences from '../images/VodaIIResidences.jpg';
import VodaIResidences from '../images/VodaI.jpg';
import cutlerBayMiddle from '../images/cutlerBayMiddle.jpg';
import arrow from '../images/arrow.png';
import bayHarbor from '../images/BayHarborResidences.jpg';
import mequityStorage from '../images/MequityStorage.jpg';
import cubeSmartStorage from '../images/CubeSmartStorage.jpg';

const privateProjects = [
    {
        src: VodaIIResidences,altText: 'Slide 1',caption: 'Voda II Residences'
    },{
        src: VodaIResidences,altText: 'Slide 2',caption: 'Voda I Residences'
    },{
        src: bayHarbor,altText: 'Slide 3',caption: 'Bay Harbor Residences'
    }
]

const publicProjects = [
    {
        src: cutlerBayMiddle,caption: 'Cutler Bay Middle School'
    },{
        src: mequityStorage,caption: 'Mequity Storage'
    },{
        src: cubeSmartStorage,caption: 'Cube Smart Storage'
    }
]

const Consulting = props => {

    let index=0;

    const leftClick = () => {
        if(index > 0) {
            privateProjects[index].style.display = 'none';
            index = index - 1;
            privateProjects[index].style.display = 'block';
            unfade();
        } else {
            privateProjects[index].style.display = 'block';
        }
    }

    const unfade = () => {
        var opacity = 0.1;
        privateProjects[index].style.display = 'block';
        
        var timer = setInterval(function() {
            if(opacity >= 1) {
                clearInterval(timer);
            }
            privateProjects[index].style.display = opacity;
            opacity += opacity * 0.1;
        },10);
    }

    return (
        <div className='consultingContainer'>
            <div className='consultingSectionContainer'>
                <div className='titleContainer'>
                    <h4>Architectural</h4>
                    <h4>Structural</h4>
                    <h4>Civil</h4>
                </div>
                <div className='content'>
                    <p>Pellentesque eget tincidunt mus viverra facilisi phasellus,eget eleifend. Venenatis ullamcorper,enim euismod aptent,rhoncus nonummy aliquam praesent phasellus laoreet. Fermentum montes est nullam inceptos,vitae praesent in augue nibh dolor placerat nec posuere nostra sem tincidunt tristique a dignissim leo fames class hymenaeos fermentum vestibulum justo. Tellus nisi metus.</p>
                </div>
            </div>

            <div className='carouselContainer'>
                <div className='carousel'>
                    <button className='left-button' onClick={leftClick}>Left</button>
                    <img src={VodaIIResidences} alt='vodaIIResidence' />
                    <img src={VodaIResidences} alt='vodaIResidence' />
                    <img src={bayHarbor} alt='bayHarbor' />
                </div>
            </div>

            {/* <div className='carousel2Container'>
                <h4>Public</h4>
                <Carousel activeIndex={activeIndexPublic} next={nextPublic} prevIoUs={prevIoUsPublic}>
                    <CarouselIndicators items={publicProjects} activeIndex={activeIndexPublic} onClickHandler={goToIndexPublic} />
                    {publicslides}
                    <CarouselControl direction="prev" directionText="PrevIoUs" onClickHandler={prevIoUsPublic} />
                    <CarouselControl direction="next" directionText="Next" onClickHandler={nextPublic} />
                </Carousel>
                <h5>Some of our projects</h5>
                <img className='arrow' src={arrow} alt='arrow from toptal' />
                <Link to='/consulting/public/projects'>
                    <button>browse Projects!</button>
                </Link>
            </div> */}
        </div>

    )    
}

export default Consulting;

这是我的带有工作轮播的HTML DOM代码

/* If You've gotten this far,you're on your own! Although we will give you some hints:
    1. You will need to write a function that creates the carousel component,you will find the HTML below.
    2. You will need to grab a reference to all of the images
    3. Create a current index
    4. Those buttons are gonna need some click handlers.
    5. Think of how you would animate this component. Make the cards slide in and out,or fade. It's up to you!
    6. Have fun!
*/

/* HTML:
  <div class="carousel">
    <div class="left-button"> < </div>
    <img src="./assets/carousel/mountains.jpeg" />
    <img src="./assets/carousel/computer.jpeg" />
    <img src="./assets/carousel/trees.jpeg" />
    <img src="./assets/carousel/turntable.jpeg" />
    <div class="right-button"> > </div>
  </div>
*/

function carouselMaker(){
  const carouselContainer = document.querySelector('.carousel-container');

  const carousel = document.createElement('div');
  const leftButton = document.createElement('button');
  const img1 = document.createElement('img');
  const img2 = document.createElement('img');
  const img3 = document.createElement('img');
  const img4 = document.createElement('img');
  const rightButton = document.createElement('button');

  img1.src = './assets/carousel/mountains.jpeg';
  img2.src = './assets/carousel/computer.jpeg';
  img3.src = './assets/carousel/trees.jpeg';
  img4.src = './assets/carousel/turntable.jpeg';

  carouselContainer.appendChild(carousel);
  carousel.append(leftButton,img1,img2,img3,img4,rightButton);

  carousel.classList.add('carousel');
  leftButton.classList.add('left-button');
  rightButton.classList.add('right-button');

  img1.style.display = 'block';

  carouselImages = [img1,img4];

  let index = 0;

  leftButton.addEventListener('click',CarouselClickLeft);
  rightButton.addEventListener('click',CarouselClickRight);

  function CarouselClickLeft(){
    if(index > 0) {
      carouselImages[index].style.display = 'none';
      index = index - 1;
      carouselImages[index].style.display = 'block';
      unfade();
    } else {
      carouselImages[index].style.display = 'block';
    }
  }
  
  function CarouselClickRight() {
    if (index < 3) {
        carouselImages[index].style.display = 'none';
        index = index + 1;
        carouselImages[index].style.display = 'block';
        unfade();
    }
    else {
        carouselImages[index].style.display = 'block';
    }
  }

  function unfade() {
    var op = 0.1;  // initial opacity
    carouselImages[index].style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        carouselImages[index].style.opacity = op;
        op += op * 0.1;
    },10);
  }

}

carouselMaker();

基本上，我想知道是否可以在函数内（而不是在使用内联样式的JSX中）更改div的样式，以便可以使style ='block'onClick的按钮。