为什么 forEach 与 e.target.children 一起工作

Question

我有一个包含多个颜色元素的 SVG/按钮。这个想法是让元素在 mouseEnter 上一个一个地滑入，然后在 mouseLeave 上从另一侧离开，然后重置以便再次执行。使用 [...e.target.children] 创建数组时，后续的 forEach 函数正常工作。使用 getElementById 并转换为数组时，出现错误“不是函数。前者返回一个实际元素的列表，而后者只返回一个列表。如何正确转换数组以便 forEach 函数工作？<svg id="HeroButton" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 48">  <title>HeroButton</title>  <polygon className="pink" points="29 23 52 0 15 0 0 0 0 48 15 48 54 48 29 23" fill="#ed3e88"/>  <polygon className="yellow" points="97.5 40.5 114 24 96 24 96 0 52 0 29 23 54 48 82 48 82 40.5 97.5 40.5" fill="#fded52"/>  <polygon className="turq" points="155.5 19.5 175 0 116 0 96 0 96 24 114 24 97.5 40.5 82 40.5 82 48 116 48 156.5 48 185 19.5 155.5 19.5" fill="#17adcb"/>  <polygon className="beige" points="224.5 33 224.5 13.5 238 0 189 0 175 0 155.5 19.5 185 19.5 156.5 48 189 48 239.5 48 224.5 33" fill="#ffffc7"/>  <polygon className="turq2" points="243 0 238 0 224.5 13.5 224.5 33 239.5 48 243 48 270 48 270 0 243 0" fill="#17adcb"/></svg>export default class HeroButton extends React.Component {  constructor(props) {    super(props);    this.state = {      translate: "translateX(100%)",      opacity: 1    }  };  componentDidMount() {    // const polygons = [...document.getElementById('HeroButton').children;    const polygons = Array.from(document.getElementById('HeroButton').children);    console.log({polygons})    this.updatePolygons(polygons);    this.setState({      translate: "translateX(-100%)",      opacity: 0    });  };  handleMouseEnter = (polygons) => {    this.updatePolygons(polygons)  };  handleMouseLeave = (polygons) => {    this.setState({      translate: "translateX(100%)",      opacity: 1    });  };  updatePolygons = (polygons) => {    // const polygons = [...e.target.children];    polygons.forEach(child => {      child.style.transform = this.state.translate;      child.style.opacity = this.state.opacity;    });

Answer 1

口香糖，您可以将孩子放在不同的数组中，然后可以在该数组上使用 forEach。

const el = document.getElementsByClassName('js-favorite-btn s-btn s-btn__unset c-pointer py8')

使用 el[0].children.forEach 时出现错误

el[0].children.forEach is not a function

但是当使用

const arr = [el[0].children]

然后运行 forEach 工作。我希望这对你有用。