Question

我正在尝试获取React组件外部的元素的offsetTop，offsetLeft，offsetHeight等，并将值作为内联CSS传递给React组件。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  const top = document.getElementById("div1").offsetTop;
  const left = document.getElementById("div1").offsetLeft;
  const bottom = document.getElementById("div1").offsetHeight;

  render() {
    return (
      <div 
         className="example"
         style={
           top: top,
           left: left,
           bottom: bottom,
         };
       ></div>
    );
  }
}

以上代码为undefined，top和left偏移值提供了bottom。

Answer 1

它们是未定义的，因为看起来您希望top，left和bottom是类属性。

将它们放在您的构造函数中：

constructor(props) {
    super(props);
    this.top = document.getElementById("div1").offsetTop;
    this.left = document.getElementById("div1").offsetLeft;
    this.bottom = document.getElementById("div1").offsetHeight;
}

使用{this.top}，{this.left}等访问它们。

Answer 2

确认外部元素已安装

class MyComponent extends React.Component {
    state = { top: 0, left: 0, bottom: 0 }
    componentDidMount() {
        const top = document.getElementById( "div1" ).offsetTop;
        const left = document.getElementById( "div1" ).offsetLeft;
        const bottom = document.getElementById( "div1" ).offsetHeight;
        this.setState( { top, left, bottom } )
    }

    render() {
        const { top, left, bottom } = this.state;
        return (
            <div 
                className="example"
                style={
                   top: top,
                   left: left,
                   bottom: bottom,
                }
            ></div>
        );
    }
}

React获取组件外部元素的偏移量

2 个答案: