Javascript 访问HTMLcollection时获取null

我有4个标签和一个列表，以便给他们的标题。我想访问每个选项卡的标题，但我只能访问整个HTMLcollection。使用react

import React from 'react';
import {Component} from 'react';

class tabs extends Component {

    render() {
        return (
            <div className={"tabs"}>
                <ul>
                    <li><a>Class 1</a></li>
                    <li><a>Class 2</a></li>
                    <li><a>Class 3</a></li>
                    <li><a>Class 4</a></li>
                </ul>

                {console.log(document.getElementsByTagName("li"))};
                //full collection with length of 4

                 {console.log(document.getElementsByTagName("li").length)};
                 //0


       {console.log(document.getElementsByTagName("li").item(0).innerHTML)};
                  //"Cannot read property 'innerHTML' of null"

            </div>
        )
    }
}

export default tabs;

从“React”导入React；
从“react”导入{Component}；
类选项卡扩展组件{
render（）{
返回(

第一类
第二类
第三类
第四类

{console.log（document.getElementsByTagName（“li”）}；
//完整系列，长度为4
{console.log（document.getElementsByTagName（“li”）.length）}；
//0
{console.log（document.getElementsByTagName（“li”）.item（0.innerHTML）}；
//“无法读取null的属性'innerHTML'”
)
}
}
导出默认选项卡；

这是因为当您声明JSX时，它不会立即打印到DOM中。首先，它将由Babel传输，在

render

hook之后，React将更新DOM。但是，在这个过程中，您已经尝试访问这些DOM元素了…

您到底想做什么？如果您只是想知道某个时刻

li

s的数量，请使用

ref

class Component extends React.Component {
  componentDidMount() {
    console.log(this.el.children.length) // 4
  }

  render() {
    return (
      <ul ref={ el => this.el = el }>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    )
  }
}

类组件扩展React.Component{
componentDidMount（）{
console.log（this.el.children.length）//4
}
render（）{
返回(
this.el=el}>





)
}
}

这对我很有用。正确的解决方案可能根本不包括访问DOM。我想将其中的文本传递给一个方法，这样我就可以根据Im in中的选项卡来做一些事情。@TylereBastian从柏林问候：）现在正在吃晚饭。@TylereBastian这其实不是我说的。我说应该是

this.el.children.length

。并且可能会在react的未来版本中删除。我从不推荐使用它们。那么，我应该什么时候尝试访问DOM呢？componentDidMount？@NelsonSilva完全正确“需要DOM节点的初始化应该在这里进行”完成了，谢谢！仍然习惯于对生命周期作出反应hooks@NelsonSilva真正的问题是：为什么您认为您需要访问DOM。通常应该避免直接访问DOM，或者至少使用

refs

。我同意你不应该依赖直接访问DOM，除非你使用的是第三方库。