本文详细介绍了在 React 应用中实现文本域（textarea）高度动态调整的方法，着重解决了初始渲染时高度不准确的问题。通过利用 `useRef` 获取 DOM 引用和 `useLayoutEffect` 在浏览器绘制前调整高度，确保了文本域能够根据内容实时且准确地自适应。此外，文章还推荐了使用成熟的第三方库来简化开发并提升健壮性。
在现代 Web 应用中，用户体验至关重要。一个常见的需求是让文本域（textarea）能够根据用户输入的内容自动调整高度，避免出现滚动条，从而提供更流畅的输入体验。然而，在 React 中直接实现这一功能时，开发者常会遇到一个问题：文本域在首次加载或输入第一个字符时，高度调整可能不准确，出现瞬时的跳动或不正确的尺寸。本教程将深入探讨如何优雅地解决这一问题，实现一个功能完善的动态高度文本域。
理解文本域自适应高度的原理
实现文本域自适应高度的核心在于利用 DOM 元素的 scrollHeight 属性。scrollHeight 表示元素内容的总高度，包括由于溢出而不可见的内容。通过将文本域的高度设置为其 scrollHeight，我们可以使其完全显示所有内容。
基本步骤如下：
- 将文本域的高度重置为 inherit 或一个较小的值，以确保 scrollHeight 能够准确反映当前内容。
- 获取文本域的 scrollHeight。
- 将文本域的高度设置为计算出的 scrollHeight 值。
- 为了防止用户手动调整大小，通常还需要将 CSS 属性 resize 设置为 none。
解决初始渲染时的尺寸问题
许多开发者会尝试在 onChange 事件中调用调整高度的逻辑。虽然这对于后续的输入是有效的，但对于文本域的初始渲染（例如，当它包含默认值时）或在输入第一个字符时，可能会出现高度计算不准确的问题。这是因为在 React 的渲染周期中，DOM 元素的布局可能尚未完全稳定。
为了解决这个问题，我们需要确保在浏览器绘制页面之前，文本域的高度已经被正确计算并设置。这正是 useRef 和 useLayoutEffect 这两个 React Hook 发挥作用的地方。
1. 获取 DOM 元素的引用：useRef
在 React 中，我们通常不直接操作 DOM。但是，对于需要测量或修改特定 DOM 属性（如 scrollHeight）的场景，useRef 提供了一种安全且推荐的方式来获取对底层 DOM 节点的直接引用。
import React, { useLayoutEffect, useRef } from "react";
function App() {
const textbox = useRef(null); // 创建一个ref对象
// ...
}然后，将这个 ref 对象绑定到你的 textarea 元素上：
<textarea
ref={textbox} // 将ref绑定到textarea
// ...
/>现在，textbox.current 将指向实际的
2. 在浏览器绘制前调整高度：useLayoutEffect
useLayoutEffect 与 useEffect 类似，但它在所有 DOM 变更完成后、浏览器执行绘制之前同步执行。这意味着任何在 useLayoutEffect 中进行的 DOM 测量和修改都会在用户看到更新之前完成，从而避免了视觉上的闪烁或不一致。
我们可以创建一个辅助函数 adjustHeight 来封装高度调整的逻辑：
function App() {
const textbox = useRef(null);
function adjustHeight() {
if (textbox.current) { // 确保ref已关联到DOM元素
textbox.current.style.height = "inherit"; // 重置高度
textbox.current.style.height = `${textbox.current.scrollHeight}px`; // 设置为实际内容高度
}
}
// 使用useLayoutEffect在DOM加载后立即调整高度
useLayoutEffect(adjustHeight, []); // 空数组表示只在组件挂载时运行一次
// ...
}将 adjustHeight 函数作为 useLayoutEffect 的回调，并传入一个空依赖数组 []，可以确保它只在组件首次挂载时执行一次，从而解决初始渲染时的高度问题。
3. 实时响应内容变化：onChange 事件
除了初始渲染，我们还需要在用户输入内容时实时调整文本域的高度。这可以通过在 textarea 的 onChange 事件中调用 adjustHeight 函数来实现。
import React, { useLayoutEffect, useRef } from "react";
import "./App.css"; // 假设有App.css文件
function App() {
const textbox = useRef(null);
function adjustHeight() {
if (textbox.current) {
textbox.current.style.height = "inherit";
textbox.current.style.height = `${textbox.current.scrollHeight}px`;
}
}
// 确保在组件挂载后立即调整高度
useLayoutEffect(adjustHeight, []);
// 当内容变化时，也调整高度
function handleChange(e) {
adjustHeight();
}
return (
<div>
<header
className="App-header"
style={{
display: "flex",
justifyContent: "center",
width: "470px",
backgroundColor: "#fff",
borderRadius: "5px",
padding: "25px 25px 30px"
}}
>
<div>
<textarea
ref={textbox} // 绑定ref
onChange={handleChange} // 绑定onChange事件
style={{
width: "95%",
padding: "15px",
borderRadius: "5px",
outline: "none",
resize: "none" // 禁用用户手动调整大小
}}
/>
</div>
</header>
</div>
);
}
export default App;通过上述代码，我们实现了一个健壮的动态高度文本域。useLayoutEffect 确保了初始渲染的准确性，而 onChange 事件则保证了后续输入时的实时响应。
推荐方案：使用第三方库
虽然手动实现动态高度文本域是可行的，但在实际生产环境中，考虑到各种边缘情况（如不同浏览器兼容性、CSS box-sizing 属性的影响、滚动条宽度等），使用一个成熟的第三方库通常是更明智的选择。这些库经过了广泛测试和优化，能够处理许多我们可能忽略的细节。
一个非常流行的 React 动态文本域库是 react-textarea-autosize。它提供了简洁的 API，并且性能良好。
使用 react-textarea-autosize
-
安装：
npm install react-textarea-autosize # 或 yarn add react-textarea-autosize
-
使用示例：
import React from 'react'; import TextareaAutosize from 'react-textarea-autosize'; function App() { return ( <div> <header className="App-header" style={{ display: "flex", justifyContent: "center", width: "470px", backgroundColor: "#fff", borderRadius: "5px", padding: "25px 25px 30px" }} > <div> <TextareaAutosize minRows={3} // 最小行数 maxRows={10} // 最大行数 (可选) style={{ width: "95%", padding: "15px", borderRadius: "5px", outline: "none", resize: "none" }} placeholder="请输入内容..." /> </div> </header> </div> ); } export default App;使用 TextareaAutosize 组件，你只需像使用普通 textarea 一样传入 props，它会自动处理高度调整逻辑。它还提供了 minRows 和 maxRows 等实用 prop 来控制文本域的最小和最大高度。
总结
在 React 中实现动态调整高度的文本域，关键在于理解 scrollHeight 的工作原理，并结合 React 的 useRef 和 useLayoutEffect Hooks 来精确控制 DOM 元素的尺寸。useRef 提供了对 DOM 元素的直接访问，而 useLayoutEffect 则确保了在浏览器绘制前完成所有必要的 DOM 测量和更新，从而解决了初始渲染时的尺寸不准确问题。对于更复杂或生产级的应用，强烈推荐使用如 react-textarea-autosize 这样的成熟第三方库，以简化开发、提高代码质量和处理各种边缘情况。
