React中如何实时获取元素的属性值？

兄弟我太懂你刚入坑React的那种懵圈感了——官方文档一上来就堆一堆概念，连变量该放state还是props都搞不清，更别说实时获取元素属性这种实际需求了😮‍💨。先给你拆解下你现在遇到的问题，再一步步给你改代码：

为什么你只能拿到固定的50px？ #

你现在是在componentDidMount里获取的clientHeight，这个生命周期函数只在组件第一次渲染完成后执行一次，所以只能拿到textarea刚渲染好的初始高度（也就是50px）。当textarea内容变多、高度自动拉伸到150px的时候，这个函数不会重新跑，state里的size自然不会更新。

正确的做法：用ResizeObserver监听尺寸变化 #

要实时获取元素的高度，我们需要给这个textarea加一个尺寸变化监听器，也就是浏览器原生的ResizeObserver API，它能精准监听元素的宽高变化，一旦变化就触发回调更新state。

下面是修改后的完整代码，每一步都加了注释，你照着看就能懂：

import React, { Component } from 'react';

class Comment extends Component {
  constructor(props) {
    super(props);
    // 创建ref关联到textarea元素
    this.chatRef = React.createRef();
    this.state = {
      backgroundColor: 'transparent',
      buttonIsHidden: 'none',
      maskIsHidden: true,
      size: 0
    };
    // 提前声明ResizeObserver实例，方便后面销毁
    this.resizeObserver = null;
  }

  componentDidMount() {
    // 获取初始高度
    const initialSize = this.chatRef.current?.clientHeight;
    this.setState({ size: initialSize });

    // 创建ResizeObserver实例，监听元素尺寸变化
    this.resizeObserver = new ResizeObserver((entries) => {
      // entries是被监听元素的数组，这里我们只监听了一个，取第一个就行
      const newSize = entries[0].contentRect.height;
      // 更新state里的size
      this.setState({ size: newSize });
    });

    // 开始监听目标元素（textarea）
    if (this.chatRef.current) {
      this.resizeObserver.observe(this.chatRef.current);
    }
  }

  componentWillUnmount() {
    // 组件卸载时停止监听，避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }

  render() {
    console.log("当前textarea高度：", this.state.size);
    return (
      // 这里要把ref绑定到你的textarea上，比如：
      <textarea ref={this.chatRef} placeholder="输入评论..." />
    );
  }
}

export default Comment;

给新手的额外小提示 #

• ref的作用：就是让你能直接拿到DOM元素，就像原生JS里的document.getElementById，React里用createRef或者useRef（函数组件）来实现。
• state的更新：只要state变了，React就会重新渲染组件，所以你在render里打印this.state.size就能看到实时变化的高度了。
• 清理监听器：一定要在componentWillUnmount里停止监听，不然组件销毁后监听器还在跑，会造成内存泄漏，这是新手很容易忽略的点。

慢慢来，React的生命周期和状态管理一开始确实绕，多写几次这种小例子就懂了～

内容的提问来源于stack exchange，提问作者user8906418