Question

下面的ReactJS代码将heroHeight生成为undefined。但是，它将在元素上工作。导入时如何获取组件的高度？

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      heroHeight: ''
    };
  }

  componentDidMount() {
    this.setState({
      heroHeight: this.calcHeight()
    });
  }

  calcHeight() {
    return this.hero.clientHeight;
  }

  render() {
    return (
      <Layout heroHeight={this.state.heroHeight}>
        <Hero ref={elem => (this.hero = elem)} />
      </Layout>
    );
  }
}

export default IndexPage;

Answer 1

我建议使用：ReactDOM.findDOMNode

 const height = ReactDOM.findDOMNode(this.hero).getBoundingClientRect().height

也有可能获得父母： const height = ReactDOM.findDOMNode（this.hero）.parentElement.getBoundingClientRect（）。height

功能介绍：

findDOMNode-只是一种用于获取要使用的元素的方法

parentElement-parentElement属性返回指定元素的父元素

getBoundingClientRect-返回一个对象，该对象具有元素的左，右，上和下边框的位置。这些属性独立于任何CSS预设。直接在文档中的html元素上调用它。

获取子组件的高度

1 个答案: