访问 HTMLcollection 时获取 null
Getting null when accessing to HTMLcollection
我有 4 个带有列表的选项卡,以便为它们指定标题。我想访问每个选项卡的标题,但我只能访问整个 HTML 集合。使用反应。
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;
那是因为当你声明 JSX 时它不会立即打印到 DOM。首先,它将由 Babel 转译,在 render
钩子之后,React 将更新 DOM。但是,嘿,在中间你试图访问这些 DOM 元素...
你到底想做什么?如果您只想在某个时候获得 li
的数量,请使用 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>
)
}
}
我有 4 个带有列表的选项卡,以便为它们指定标题。我想访问每个选项卡的标题,但我只能访问整个 HTML 集合。使用反应。
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;
那是因为当你声明 JSX 时它不会立即打印到 DOM。首先,它将由 Babel 转译,在 render
钩子之后,React 将更新 DOM。但是,嘿,在中间你试图访问这些 DOM 元素...
你到底想做什么?如果您只想在某个时候获得 li
的数量,请使用 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>
)
}
}