React中实现向上自动扩展文本框时遭遇'Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'错误的技术咨询

看起来你遇到的核心问题是直接操作虚拟DOM节点而非真实HTML元素导致的错误。咱们一步步拆解问题，然后给出符合React最佳实践的解决方案：

错误原因分析 #

你用document.getElementsByTagName("ReactTextareaAutocomplete")获取的是React组件的虚拟DOM标签，并不是浏览器渲染后的真实HTML元素。window.getComputedStyle方法要求第一个参数必须是真实的Element类型，所以当你传入tx[0]（可能是null或者虚拟DOM节点）时，就会抛出那个错误。

另外，直接用原生DOM操作的方式在React里也不是最佳实践——React的虚拟DOM更新机制可能会让你的手动DOM操作失效，比如组件重新渲染后，你添加的事件监听可能会丢失。

正确的解决方案：用React Refs操作真实DOM #

React提供了useRef钩子来安全地获取真实DOM元素，结合useEffect在组件挂载后进行DOM操作，咱们可以这样修改你的代码：

import React, { useRef, useEffect } from 'react';
import ReactTextareaAutocomplete from 'react-textarea-autocomplete';

const AutoExpandingTextbox = () => {
  // 创建ref用于获取ReactTextareaAutocomplete的DOM节点
  const autocompleteRef = useRef(null);
  const maxHeight = 100;
  let baseHeight = 0;

  useEffect(() => {
    // 找到组件内部的真实textarea元素（ReactTextareaAutocomplete会包裹原生textarea）
    const textarea = autocompleteRef.current?.querySelector('textarea');
    if (!textarea) return;

    // 获取初始的默认高度
    baseHeight = parseInt(window.getComputedStyle(textarea).height, 10);

    // 定义动态调整高度的函数
    const adjustTextareaHeight = () => {
      // 先重置高度为auto，让scrollHeight能正确计算内容高度
      textarea.style.height = 'auto';
      // 计算新高度：不超过maxHeight的话用scrollHeight，否则用maxHeight
      const newHeight = Math.min(textarea.scrollHeight, maxHeight);
      textarea.style.height = `${newHeight}px`;
      // 调整margin-top（保持你原来的需求）
      textarea.style.marginTop = `${baseHeight - newHeight}px`;
      // 超过最大高度时显示滚动条
      textarea.style.overflowY = newHeight >= maxHeight ? 'auto' : 'hidden';
    };

    // 组件挂载时先调整一次高度
    adjustTextareaHeight();

    // 给textarea添加input事件监听
    textarea.addEventListener('input', adjustTextareaHeight);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      textarea.removeEventListener('input', adjustTextareaHeight);
    };
  }, []);

  return (
    <ReactTextareaAutocomplete
      ref={autocompleteRef}
      className="message-input"
      placeholder="Type your message.."
    />
  );
};

export default AutoExpandingTextbox;

关键细节说明 #

1. 用Ref获取真实DOM：autocompleteRef.current会指向ReactTextareaAutocomplete渲染后的真实DOM节点，我们再通过querySelector('textarea')找到内部的原生textarea——这才是getComputedStyle能正常处理的真实元素。
2. useEffect的使用：我们在useEffect的空依赖数组里执行DOM操作，确保只在组件挂载后执行一次，同时在清理函数中移除事件监听，避免内存泄漏。
3. 高度调整逻辑：每次输入时先把高度重置为auto，这样scrollHeight才能准确反映内容的实际高度，再根据maxHeight限制调整最终高度。

额外建议 #

如果ReactTextareaAutocomplete这个组件本身提供了自动扩展的props（比如很多类似组件会有autoExpand、maxRows这类属性），优先使用组件自带的功能，这样更符合React的声明式编程风格，也能避免手动DOM操作的潜在问题。

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