Question

如何获取导入组件的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>

    )
}

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

Dashboard.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()，但错误仍然相同

Answer 1

有一些很好的方法可以完成您想要的事情，例如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状态之内。我建议避免反应状态。你可以读 this文章

Answer 2

我认为您可以尝试这样的事情：

Trade

如果要访问组件的高度，则可以执行以下操作：

constructor(props)
{
    super(props);

    this.state = {
        height: 0,
    }
}

componentDidMount()
{
    this.setState({
        height: this.topNav.getBoundingClientRect()
    });
}

getHeight()
{
    return this.state.height;
}

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>

    )
}

获取导入组件的高度

2 个答案:

编辑