如何修复"TypeError: this.getElement(.)为空“
我正在创建一个数组，它将包括我的应用程序中某些组件的高度。
为此，我必须得到元素和它们的高度。
我是根据这个功能做的：
getElement(method, elem){
switch (method){
case 'id':
return document.getElementById(elem);
case 'class':
return document.getElementsByClassName(elem);
case 'name':
return document.getElementsByName(elem);
case 'tagName':
return document.getElementsByTagName(elem);
default:
console.error('Incorrect use of getElement method')
}
}然后通过这个函数将元素的高度插入到数组中：
heightsArr = [
this.getElement('id', 'home').clientHeight,
this.getElement('id', 'services').clientHeight
]但后来我发现了一个错误：
TypeError: this.getElement(...) is null我试图将数组移动到componentDidMount()函数，然后错误消失了。
但是当我调用数组时，它返回了undefined
当它在componentDidMount()中时，我试图对数组执行console.log()操作，并按照预期返回所有高度的数组。
我试图通过以下代码将这个数组设置为NavBar组件：
<NavBar heights={this.heightsArr}></NavBar>但是当我检查这个组件时，我看到了这个组件的道具是
{
heights: undefined
}我怎么才能修好它？
编辑：
现在它开始工作了，使用浏览器上的react，我看到高度最终是NavBar的支柱。
我正在将props设置为数组中对象的属性，但当我将该属性的值记录到控制台时，就会出现未定义的情况。
我将props分配给对象的代码是：
componentDidMount() {
this.sections.map(section => {
section.height = this.props.heights
})
}我是否应该将这个map函数移到componentDidUpdate()而不是componentDidMount()
回答 2
Stack Overflow用户
发布于 2019-07-13 20:05:31
React可以访问虚拟DOM，而不是您通常使用传统的dom选择器与之交互的dom。为了协调React的生命周期事件，您应该使用React refs。
考虑一下这个沙箱：https://codesandbox.io/s/angry-wood-bp95g
工作代码：
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
totalHeight: 0
};
this.home = React.createRef();
this.services = React.createRef();
}
componentDidMount() {
let allHeights = 0;
const refs = [this.home, this.services];
refs.forEach(ref => {
allHeights += ref.current.clientHeight;
});
this.setState({
totalHeight: allHeights
});
}
render() {
return (
<div>
<h4>Height: {this.state.totalHeight}</h4>
<div ref={this.home} style={{ height: "500px", background: "blue" }}>
Home Section
</div>
<div
ref={this.services}
style={{ height: "300px", background: "green" }}
>
Services
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);“参考”允许您访问与传统选择器相同的元素属性和方法。在这种情况下，我们给每个<div>标记一个ref。在第一个呈现之后立即触发的componentDidMount()内部，我们可以按预期使用它们的.clientHeight访问这些挂载元素的高度。
我们在refs上迭代以获得总高度并更新totalHeight状态值。类似地，您可以将该状态传递给Navbar组件，如下所示：
<Navbar height={this.state.heights}/>
Stack Overflow用户
发布于 2019-07-13 20:05:41
此外，还可以在insert to数组上控制非空元素或未定义元素：
heightsArr = [
this.getElement('id', 'home') && this.getElement('id', 'home').clientHeight,
this.getElement('id', 'services') && this.getElement('id', 'services').clientHeight
]https://stackoverflow.com/questions/57022300
复制相似问题
腾讯云开发者
