编辑：

Question

我正在创建一个数组，其中将包含应用程序中某些组件的高度。

为此，我必须获取元素及其高度。
我是通过此功能做到的：

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>

但是当我通过react插件检查组件是否为Firefox时，我发现组件的道具是

{
   heights: undefined
}

我该如何解决？

编辑：

现在它可以正常工作了，并且在浏览器中使用了反应检查器，我发现这些高度是NavBar的最好道具。

我正在将props设置为数组中对象的属性，但是当我向控制台登录时，该属性的值却变得不确定。

将props分配给对象的代码是：

componentDidMount() {
    this.sections.map(section => {
      section.height = this.props.heights
    })
}

我应该将此map函数移至componentDidUpdate()而不是componentDidMount()吗？

Answer 1

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}/>

Answer 2

此外，您还可以在插入数组时控制元素为非null或未定义：

heightsArr = [
    this.getElement('id', 'home') && this.getElement('id', 'home').clientHeight,
    this.getElement('id', 'services') && this.getElement('id', 'services').clientHeight
  ]

如何解决“ TypeError：this.getElement（...）为空”

编辑：

2 个答案: