javascript - 访问 HTMLcollection 时获取 null

Question

我有 4 个带有列表的选项卡，以便为它们指定标题。我想访问每个选项卡的标题，但我只能访问整个 HTML 集合。使用 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;

Answer 1

那是因为当您声明 JSX 时，它不会立即打印到 DOM 中。首先，它将由 Babel 转译，在 render 钩子(Hook)之后，React 将更新 DOM。但是，嘿，在中间你试图访问这些 DOM 元素......