Javascript 如何从JS端口进行响应

我有以下函数设置HTML元素的CSS属性。我试图在REACT中使用相同的方法，但由于明显的原因，它不起作用

你知道我怎样才能达到同样的效果吗

$(function fn1() {
  var myIndex = 0;
  carousel();

   function carousel() {
      var i;
      var totalElements = document.getElementsByClassName("imgClass");
      for (i = 0; i < totalElements.length; i++) 
       {
       totalElements[i].style.display = "none";
       }

     myIndex++;
     if (myIndex > totalElements.length) 
     {
     myIndex = 1;
     }

    totalElements[myIndex - 1].style.display = "block";
    setTimeout(carousel, 5000);
 }
});

$（函数fn1（）{
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var totalElements=document.getElementsByClassName（“imgClass”）；
对于（i=0；itotalElements.length）
{
myIndex=1；
}
totalElements[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}
});

反应代码：

import React, { Component } from "react";
import ImageSlide from "./ImageSlide";
const axios = require("axios");
axios.defaults.baseURL = "http://localhost:1337";
axios.defaults.headers.common = {
Authorization:
"bearer " +
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1YjZmOTk4ODU2YjBjOTA1NTg2OTI0ZWIiLCJpYXQiOjE1MzQwNDEyNjQsImV4cCI6MTUzNjYzMzI2NH0.nPEcbkoJ4wcbwi_CEX4hVKXB0PJnUtt3VuHcBljbF2s"
};
// const absolutePath = "../../strapui/app/public";

export class Container extends Component {
  constructor(props) {
  super(props);
  this.state = { imageData: null };
}

componentDidMount() {
  let url = "http://localhost:1337/product";

  axios
  .get(url)
  .then(response => {
  // handle success
  const imageData = response.data;
  imageData && this.setState({ imageData });
  })
  .catch(error => {
  // handle error
  console.log(error);
  });
}

render() {
  const images = require.context(
  "../../strapui/app/public/uploads",
  true,
  /\.jpg$/
  );
  const keys = images.keys();
  const svgsArray = keys.map(key => images(key));
  const imageData = this.state.imageData;

  if (imageData === null) return null;
  return (
   <div className="container">
    <div className="slideshowContainer">
     <div className="colItemLeft">
      <a href="/product?prod=cust" id="dh">
       <div className="dhOverlay">
        <ImageSlide
         styles="imgClass"
         imagePath={imageData[0].image}
         svgsArray={svgsArray}
        />
       <div className="overlayDH">
        <img
         src={require("./assets/folder1/0.png?")}
         alt=""
        />
       </div>
      </div>
     </a>
    </div>
   </div>
  );
 }
}

export default Container;

import React，{Component}来自“React”；
从“/ImageSlide”导入ImageSlide；
常量axios=要求（“axios”）；
axios.defaults.baseURL=”http://localhost:1337";
axios.defaults.headers.common={
授权：
“持票人”+
“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.Eyjfawqoii1yjzmotk4odu2yjbjota1ntg2oti0zwilcyxqiojmqznjqsimv46mtuznjzmzi2nh0.nPEcbkoJ4wcbwi_cex4hvkxb0pjnut3vuchbljb2s”
};
//const absolutePath=“../../strapui/app/public”；
导出类容器扩展组件{
建造师（道具）{
超级（道具）；
this.state={imageData:null}；
}
componentDidMount（）{
让url=”http://localhost:1337/product";
axios
.get（url）
。然后（响应=>{
//成功
const imageData=response.data；
imageData&&this.setState（{imageData}）；
})
.catch（错误=>{
//处理错误
console.log（错误）；
});
}
render（）{
const images=require.context(
“../../strapui/app/public/uploads”，
符合事实的
/\jpg先生$/
);
const keys=images.keys（）；
const svgsArray=keys.map（key=>images（key））；
const imageData=this.state.imageData；
if（imageData==null）返回null；
返回(
);
}
}
导出默认容器；

---

我只是REACT的初学者，我的一个朋友帮我编写了REACT的代码，我用REACT代码更新了问题，我想让帖子中提到的JS函数更改CSS属性。首先从函数内的数据库检索图像，如果要在不干扰react渲染的情况下操作DOM，必须使用shouldComponentUpdate（），并在方法内返回true。 其次，将参照设置为元素（）。

---

第三，在componentWillUnmount（）上删除侦听器、setInterval和setTimeout。

显示您在中的尝试React@JustinastotalElements[i]。样式未通过REACT得到识别，它表示“无法读取未定义的属性样式”@DamianPeralta我将所有运行的js和css文件

npm run build

提取

bundle.js

并在react中使用。基本上，这个函数使用classname

imgClass

的所有元素，并更改循环中显示的css属性。通过创建slideshow@charlietfl

totalElements

的作用域在

carousel（）

函数中，并在该作用域内调用。因此，这意味着您的

totalElements

为空。这是JS，React不会阻止您使用普通JS。确保你有class

imgClass

Hi的元素，我只是REACT的初学者我的一个朋友帮我编写了REACT的代码我用REACT代码更新了问题，我想让帖子中提到的JS函数更改css属性。图像是从函数