如何从JS移植到REACT

Question

我有以下函数来设置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);
 }
});

REACT CODE：

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;

我只是REACT的初学者，我的一个朋友帮我修改了REACT的编码我用REACT代码更新了问题，我希望帖子中提到的JS函数改变CSS属性。从函数内的数据库中检索图像

Answer 1

首先，如果你想操纵DOM而不干扰反应渲染，你必须使用shouldComponentUpdate（）（https://reactjs.org/docs/react-component.html#shouldcomponentupdate）并在方法内返回true。其次，将refs设置为你的元素（https://reactjs.org/docs/glossary.html#refs）。第三，在componentWillUnmount（https://reactjs.org/docs/react-component.html#componentwillunmount）中删除你的监听器，setInterval，setTimeout。