我如何將這個常規的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