我如何将这个常规的JavaScript函数转换为React.js可以读取的内容

Question

我将跟随一个视频，使用JavaScript进行幻灯片演示。 我试图弄清楚如何从视频到create-react-app中的React实现此功能。 我对React不太熟悉，但是我认为我不应该在函数中使用“ getElementsByClassname”。 我应该怎么做才能使这项工作？

我不确定在哪里像在常规JavaScript中那样调用函数，因此我一直在使用onClick事件对其进行调用。 如果有人也可以帮助我，那将是惊人的。

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import './Showcase.css';

class Showcase extends Component{
    constructor(props){
        super(props);
        this.initGallery = this.initGallery.bind(this);
    }
    initGallery(){
        let slideIndex, slides, dots, captionText;
        slideIndex = 0;
        slides = document.getElementsByClassName('imageHolder');
        slides[slideIndex].style.opacity = 1;
        console.log('hello');
    }
    render(){
        return(
            <section onClick={this.initGallery} id="Showcase"> {/*CONTAINS ALL SLIDING IMAGES*/}
                <div className="captionHolder">
                    <p className="captionText">Caption Text</p>
                </div>
                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/amos17_v2.jpg" alt="Amos-17 Mission"/>
                    <p className="captionText">Caption Text-01</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/v2_smallsatheader.png" alt="RideShare Missions"/>
                    <p className="captionText">Caption Text-02</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/nasa_astronauts3.jpg" alt="NASA Astronauts on crew Dragon"/>
                    <p className="captionText">Caption Text-03</p>
                </div>
            </section>
        );
    }
}

export default Showcase;

没有收到任何错误，每当click事件触发该函数时，我都会通过添加console.log来检查该函数是否已成功调用。 我根本没有得到想要的结果，这是采用className并将不透明度更改为1的原因，因为在CSS文件中将其设置为不透明度0，因此将使图像出现。

Answer 1

除了使用document.getElementByClassName之外，您还可以在标签上创建引用，并像这样使用它。myRef = React.createRef（）; 在您的构造函数中并将其绑定到标签，这是在react中执行的方法。 你可以在这里参考

反应Refs和Dom