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);
 }
});

反应码：

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。

如何从JS移植到REACT

1 个答案: