时间戳

首页 > 解决方案 > 获取导入组件的高度

javascript - 获取导入组件的高度

问题描述

如何获取getBoundingClientRect()导入的组件？或者至少访问里面的元素

如果它在组件本身内部使用，我可以得到它

FixedTopNavigation.js

constructor(props) {
    super(props);
    this.state = {
        height: 0,
    }
}

componentDidMount() {
    console.log(this.topNav.getBoundingClientRect());
}
render() {
    return (
        <nav ref={(elem) => this.topNav = elem} id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <a className="navbar-brand" href="/">Biometrics</a>
        </nav>

    )
}

但是在将该组件导入另一个文件后使用时：

仪表板.js

constructor(props) {
    super(props);
    this.state = {
        height: 0,
    }
}

componentDidMount() {
    console.log(this.topNav.getBoundingClientRect());
}
render() {
    return (
        <FixedTopNavigation ref={(elem) => this.topNav = elem}/>
    )
}

收到错误：

TypeError：this.topNav.getBoundingClientRect 不是函数

使用后console.log()，似乎不再返回元素。我搜索的所有教程都指向第一个代码语法。

也试过this.topNav = React.createRef()了，还是一样的错误

标签： javascriptreactjs

解决方案

有一些好方法可以做你想做的事，比如 Redux、Context、全局变量、示例：window.myApp.topNavBar.height = 100

我可能会选择这个：

import React from "react";
import { render } from "react-dom";

class Target extends React.Component {
  render() {
    return <h1 className={this.props.className}>TARGET</h1>;
  }
}

class App extends React.Component {
  componentDidMount() {
    console.log(
      "RESULT: ",
      document.querySelector(".target").getBoundingClientRect()
    );
  }
  render() {
    return <Target className="target" />;
  }
}

render(<App />, document.querySelector(".root"));

你甚至可以删除该属性。
你可以在这里看到这个工作：https ://codesandbox.io/s/5xx50pw984?fontsize=14

编辑

对于那些使用像 Redux 这样的状态管理器的人，请避免使用这种代码，并尝试将所有内容都放在你的 redux 状态中。我建议避免反应状态。你可以阅读 这篇文章

推荐阅读