Javascript 如何在React中按类名访问所有dom元素？

我想访问所有具有特定类名的dom元素，但在react上，这似乎不像纯javascript中那样有效。它似乎找不到元素

import React from 'react';
import {Route, Link} from 'react-router-dom';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import Header from '../header/header.component';
import style from './information.style.scss';
import { Player } from 'video-react';
import YouTube from 'react-youtube';

class InformationJob extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            slideIndex: 1,
            job: null,
        };
        this.showDivs = this.showDivs.bind(this);
    }

    plusDivs(n) {
         this.setState({slideIndex: this.state.slideIndex + n});
         this.showDivs(this.state.slideIndex);
    }

    showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {this.setState({slideIndex :1})}
        if (n < 1) {this.setState({slideIndex :x.length})}
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[this.state.slideIndex-1].style.display = "block";
    }

    componentDidMount() {
        this.showDivs(this.state.slideIndex);
    }

    _onReady(event) {
        // access to player in all event handlers via event.target
        event.target.pauseVideo();
    }

    render() {
        const opts = {
            height: '390',
            width: '100%',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                autoplay: 0
            }
        };
        return (
            <div className={"wrapperDiv"}>

                <div className={"flexDivCol"}>
                    <div id="header">
                        <Header size="small"/>
                    </div>
                    <div>
                        <h3 className={""} style={{marginBottom: '20px'}}>Majoitus- ja ravitsemisala</h3>
                        <h4 className={"primaryColor"}>Tarjoilija</h4>
                    </div>
                    <div id="imageSection">
                        <div className="w3-content w3-display-container">
                            <img className="mySlides"
                                 src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                <img className="mySlides"
                                     src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                    <img className="mySlides"
                                         src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                        <img className="mySlides"
                                             src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                            <button className="w3-button w3-black w3-display-left" onClick={this.plusDivs(-1)}>&#10094;</button>
                            <button className="w3-button w3-black w3-display-right" onClick={this.plusDivs(1)}>&#10095;</button>
                        </div>
                        {/*<div className={"screenSection"} style={{backgroundImage: 'url(https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg)'}}></div>*/}
                    </div>
                    <div id="jobDescription">
                        <p className={"secondaryColor"}>Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis. Integer ac enim pellentesque, adipiscing metus id, pharetra odio. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis.  </p>
                    </div>
                    <div id="videoSection">
                        <YouTube
                            videoId="0cfVxK5YrGY"
                            opts={opts}
                            onReady={this._onReady}
                        />
                    </div>
                    <div id={"btnFilter"}>
                        <Link to='/traineeships'>
                            <Button  className={"primaryBtn"}>
                                Näytä harjoittelupaikat
                            </Button>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}

export default InformationJob;

从“React”导入React；
从'react router dom'导入{Route，Link}；
从“react Bootstrap”导入{Bootstrap、Grid、Row、Col、Button、Image、Modal、Popover}；
从“../Header/Header.component”导入标题；
从“/information.style.scss”导入样式；
从“视频反应”导入{Player}；
从“react YouTube”导入YouTube；
类InformationJob扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
幻灯片索引：1，
作业：空，
};
this.showDivs=this.showDivs.bind（this）；
}
plusDivs（n）{
this.setState（{slideIndex:this.state.slideIndex+n}）；
this.showDivs（this.state.slideIndex）；
}
showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{this.setState（{slideIndex:1}）}
如果（n<1）{this.setState（{slideIndex:x.length}）}
对于（i=0；iDonec facilisis tortor ut augue lacinia，在viverra est semper。Sed sapien metus，scelerisque nec pharetra id，Tempora a tortor。Pellentsque non Dignessim neque。但是viverra est，但是Vignessim Elite elementum ut。Nunc vel rhoncus nibh，但是tincidunt turpis。Integer ac enim Pellentsque，Adipis metus id，pharetra odio。Donec facilisis tortor奥古斯·拉西尼亚，在维韦拉街上。塞德·萨皮恩·梅特斯，权杖，没有法雷特拉的身份，暂时的侵权人。佩伦特式的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严的无尊严

Näytäharjoitelupaikat
);
}
}
导出默认信息作业；

我得到的错误是：

未捕获的TypeError:无法读取未定义的属性“style” 位于InformationJob.showDivs（InformationJob.component.js:74） 位于InformationJob.plusDivs（InformationJob.component.js:58） 位于InformationJob.render（InformationJob.component.js:138）

编辑：

---

当我控制台日志var x=document.getElementsByClassName（“mySlides”）；x显示为空。

单击按钮（两个按钮）上的

onClick

连续调用函数

plusDivs

，该函数反过来调用

showDivs

。它应该是

onClick={（）=>this.plusDivs（-1）}

如果：1）在该类中找不到元素，则可能发生这种情况。2） 如果使用无效索引访问数组中的元素。一些注意事项：1）您没有使用

setState

更新状态2）您最好根据道具或状态显示/隐藏div，避免手动查询元素并对其进行操作。3） 即使您手动将元素设置为不可见，在下一次渲染时（当状态/道具更改时），react将撤消您的所有更改。我有类为“mySlides”的元素，您没有使用setState更新状态（通过状态更新dom，而不是直接更新）我正在使用setState，但仍然没有working@ChiragRavindra我更新了代码并添加了setState