为什么 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&nbsp;el&nbsp;=&nbsp;document.getElementsByClassName('js-favorite-btn&nbsp;s-btn&nbsp;s-btn__unset&nbsp;c-pointer&nbsp;py8')使用 el[0].children.forEach 时出现错误el[0].children.forEach&nbsp;is&nbsp;not&nbsp;a&nbsp;function但是当使用const&nbsp;arr&nbsp;=&nbsp;[el[0].children]然后运行 forEach 工作。我希望这对你有用。