ReactJS - 未定义元素
2019-06-05
573
我有以下组件,并且
changeColor()
函数导致错误,从而导致错误消息:
TypeError: Cannot set property 'color' of undefined
这是组件中唯一的错误。所有其他操作均正常运行。JSON 数据已成功获取,组件渲染也正常。当然,这是在我实现阻止应用程序的函数
changeColor()
之前发生的。
import React, { Component } from 'react'
var data = require('./db.json');
class Cronology extends Component {
constructor(props) {
super(props)
this.state = {
cronology: [],
year: "",
description: ""
}
this.changeColor = this.changeColor.bind(this)
}
componentDidUpdate() {
this.setState({
cronology: data.cronology
})
this.changeColor();
}
changeColor() {
document.querySelectorAll('p').style.color = 'red'
}
render() {
return (
<table>
{
this.state.cronology && this.state.cronology.map(
(i) => {
return (
<tr>
<th className="column1">• {i.year}</th>
<th className="column2"><p>{i.description}</p></th>
</tr>
)
}
)
}
</table>
)
}
}
export default Cronology;
2个回答
您的
changeColor()
方法正在使用
document.querySelectorAll('p')
,它返回一个集合。您必须定位特定元素。
document.querySelectorAll('p')[0].style.color = "red"
例如
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
JohnSnow
2019-06-05
作为对其他人答案的补充,您可以使用
forEach
,即:
document.querySelectorAll('p').forEach(el => el.style.color = 'red');
Matin Sasan
2019-06-05