Javascript 反应图像闪烁，而不是移动到第一位

我正在学习react，并试图用它制作我的porfolio网站。我需要有人解释一下这是怎么回事。我想让一个简单的旋转木马自动旋转，当一个元素离开视口时，将其发送到开始位置，但是当该元素离开视口时会发生什么情况所有的元素都开始闪烁，因为状态正在发生变化，重新渲染时会发生很多事情，我不知道该怎么办

import React, { Component } from "react";
import html from "./img/html-5.svg";
import css from "./img/css-3.svg";
import javascript from "./img/javascript.svg";

import "./Skills.css";

import SkillsIcon from "./SkillsIcon";

class Skills extends Component {
  static defaultProps = {
    icons: [
      html,
      css,
      javascript,
    ],
  };
  constructor(props) {
    super(props);
    this.state = {
      pos: new Array(this.props.icons.length).fill(0),
      items: [...document.getElementsByClassName("SkillsIcon")],
      queue: [],
      icons: this.props.icons,
    };

    this.spinElement = this.spinElement.bind(this);
  }

  componentDidMount() {
    setInterval(this.spinElement, 10);
    console.log("did mount");
    this.setState(st => {
      return {
        items: [...st.items, ...document.getElementsByClassName("SkillsIcon")],
      };
    });
  }

  spinElement() {
    this.setState(st => {
      let newPos = st.pos.map((item, i) => {
        return (st.pos[i] = item + 0.1);
      });
      let toExactPos = st.items.map(item => {
        return item.offsetLeft;
      });
      let exactPos = st.pos.map((item, i) => {
        return newPos[i] + toExactPos[i];
      });
      return {
        pos: newPos,
        itemExact: exactPos,
      };
    });
  }
  // Render one by one
  // First element out of the box by - (clientWidth / items.length) pixels
  renderElement() {
    let itemSpacing = document.body.clientWidth / this.state.items.length;
    for (let i = 0; i < this.state.icons.length; i++) {
      if (this.state.items[i]) {
        let rect = this.state.items[i].getBoundingClientRect();
        if (Math.floor(rect.x) > document.body.clientWidth - 150) {
          let last = this.state.icons.pop();
          if (last) {
            this.state.icons.unshift(last);
          }
        }
      }
    }
    return (
      <div className='SkillsAll'>
        {this.state.icons.map((icon, i) => {
          return (
            <SkillsIcon
              className='SkillsIcon'
              src={icon}
              alt={icon}
              style={{
                transform: `translateX(${this.state.pos[i]}px)`,
                margin: `${itemSpacing / this.}px`,
              }}
            />
          );
        })}
      </div>
    );
  }

  render() {
    return <div className='Skills'>{this.renderElement()}</div>;
  }
}

export default Skills;

import React，{Component}来自“React”；
从“/img/html-5.svg”导入html；
从“/img/css-3.svg”导入css；
从“/img/javascript.svg”导入javascript；
导入“/Skills.css”；
从“/SkillsIcon”导入SkillsIcon；
类技能扩展组件{
静态defaultProps={
图标：[
html，
css，
javascript，
],
};
建造师（道具）{
超级（道具）；
此.state={
位置：新数组（这个。道具。图标。长度）。填充（0），
项目：[…document.getElementsByClassName（“SkillsIcon”）]，
队列：[]，
图标：this.props.icons，
};
this.spinElement=this.spinElement.bind（this）；
}
componentDidMount（）{
setInterval（此参数为10）；
console.log（“did mount”）；
this.setState（st=>{
返回{
items:[…st.items，…document.getElementsByClassName（“SkillsIcon”）]，
};
});
}
spinElement（）{
this.setState（st=>{
让newPos=st.pos.map（（项目，i）=>{
退货（st.pos[i]=项目+0.1）；
});
让toExactPos=st.items.map（item=>{
返回项目.offsetLeft；
});
让exactPos=st.pos.map（（项目，i）=>{
返回newPos[i]+toExactPos[i]；
});
返回{
pos:newPos，
itemExact:exactPos，
};
});
}
//逐一渲染
//第一个按-（clientWidth/items.length）像素开箱即用的元素
渲染（）{
设itemSpacing=document.body.clientWidth/this.state.items.length；
for（设i=0；idocument.body.clientWidth-150）{
让last=this.state.icons.pop（）；
如果（最后）{
this.state.icons.unshift（最后一个）；
}
}
}
}
返回(
{this.state.icons.map（（icon，i）=>{
返回(
);
})}
);
}
render（）{
返回{this.renderElement（）}；
}
}
输出默认技能；

子组件是只渲染的组件，并没有什么可看的

import React, { Component } from "react";
import "./SkillsIcon.css";

class SkillsIcon extends Component {a
  render() {
    return (
      <img
        className={this.props.className}
        src={this.props.src}
        alt={this.props.alt}
        style={this.props.style}
      />
    );
  }
}

export default SkillsIcon;

import React，{Component}来自“React”；
导入“/SkillsIcon.css”；
类SkillsIcon扩展组件{a
render（）{
返回(
);
}
}
导出默认技能；

---

我该怎么做，如何停止重新渲染？redux能帮上忙吗？如何在不引起闪烁的情况下从渲染中弹出一个元素并将其返回到开始位置？

如果触发一个setInterval，它每10毫秒调用一次SpineElement，SpineElement就会改变状态，我认为combo是您的问题，我需要该setInterval来移动元素。无论我做什么，状态都必须改变，这将导致重新渲染试着像这样调用它

返回{this.renderElement}我必须调用该函数才能渲染元素，否则它将在渲染中不返回任何内容。