为什么我无法获取我的 this.refs.children 元素？

Question

我试图在 React 中获取 ref 的元素，但我的 console.log 返回未定义。

这里是情况的visual_log：

在这张图片中，我们可以看到，第一次，HTML 集合有一些元素，但是当我尝试调用 arrayElement 时，出现了一个问题：控制台返回 undefined

这是我的代码：

let sliderContainer= this.refs.sliderContainer
console.log("sliderContainer: ", sliderContainer) // return reference element with all property inside
console.log("sliderContainer.childNodes: ", sliderContainer.childNodes,sliderContainer.children ) // return NodeList, HTMLCollection.... length 4
console.log("sliderContainer.childNodes[0]: ", sliderContainer.childNodes[0], sliderContainer.children[0) // return undefined, undefined 

由于我的控制台在第一个日志中显示我的裁判组件内的所有 div 元素，这怎么可能？

任何提示都会很棒， 谢谢

Answer 1

它是HTMLCollection，它像一个数组一样工作，因此您可以通过索引collection[index] 访问元素。更多信息可以查看this page