对访问节点维度的反应ref当前为null

Question

我正在尝试使用React.createRef()来访问React中DOM元素的尺寸。

我在

之类的构造函数中创建

constructor(props) {
super(props);
this.container = React.createRef()
}

并像分配它一样

  <div id="container"
  ref={this.container}
  >...children</div>

但是，当我从componentDidMount()中注销时

componentDidMount(){
console.log(this.container);
}

我在控制台中看到{current: null}。但是，如果我扩展此对象，则可以看到我想要访问的所有内容，例如具有值的clientHeight。

如何访问这些属性？目前this.container.current.clientHeight返回null。

谢谢

Answer 1

这是我的示例代码：

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

this.textWidth = React.createRef();
this.state = {
  width: ""
};
}

 componentDidMount() {
this.textWidth.current.addEventListener("load", this.getWidth());
}

 getWidth = () => {
this.setState({
  width: this.textWidth.current.clientWidth + 30
 });
};

render() {
  return (
  <div
    style={{
      width: this.state.width
     }}
     className="badge"
   >
     <p ref={this.textWidth}>{this.props.children}</p>
   </div>
  );
  }
 }