访问HTMLcollection时获取null

时间:2018-03-19 17:11:51

标签: javascript html reactjs tabs htmlcollection

我有4个带有列表的标签,以便为他们提供标题。我想访问每个标签的标题,但我只能访问整个HTMLcollection。使用反应。

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;

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

你到底想要做什么?如果您只想要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>
    )
  }
}