为了确保在 React 输入框中输入的空格样式和输入后页面显示一致，你可以使用 CSS 的 white-space 属性来控制空格的显示。具体来说，可以使用 pre-wrap 值来保留空格和换行符。

import React, { useState, useEffect, useRef } from 'react';
import './App.css';const App = () => {const [text, setText] = useState('');const textareaRef = useRef(null);useEffect(() => {const textarea = textareaRef.current;// 重置高度，防止高度累积textarea.style.height = 'auto';// 设置高度为内容的高度textarea.style.height = `${textarea.scrollHeight}px`;}, [text]);const handleChange = (event) => {setText(event.target.value);};return (<div className="container"><textareaid="dynamic-textarea"ref={textareaRef}value={text}onChange={handleChange}placeholder="请输入文字..."/><div className="display-text">{text}</div></div>);
};export default App;

.container {width: 300px;margin: 50px auto;
}#dynamic-textarea {width: 100%;min-height: 50px;max-height: 150px; /* 设置最大高度 */overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */padding: 10px;box-sizing: border-box;font-size: 16px;line-height: 1.5;resize: none; /* 禁止用户手动调整大小 */border: 1px solid #ccc;border-radius: 4px;
}.display-text {white-space: pre-wrap; /* 保留空格和换行符 */padding: 10px;margin-top: 20px;border: 1px solid #ccc;border-radius: 4px;background-color: #f9f9f9;font-size: 16px;line-height: 1.5;
}

1. React 组件：

   • 使用 useState 来管理输入框的内容。
   • 使用 useRef 来获取 textarea 的 DOM 节点。
   • 使用 useEffect 来监听 text 状态的变化，每次输入内容时动态调整输入框的高度。
   • handleChange 函数用于更新 text 状态。

2. CSS 部分：

   • #dynamic-textarea：设置输入框的最小高度（min-height）和最大高度（max-height）。当内容超过最大高度时，使用 overflow-y: auto 显示垂直滚动条。
   • resize: none：禁止用户手动调整输入框的大小。
   • white-space: pre-wrap：在 .display-text 类中使用 white-space: pre-wrap 来保留空格和换行符，使输入框中的内容和显示的内容样式一致。

3. 动态调整高度：

   • 在 useEffect 中，每次 text 状态变化时，重置输入框的高度为 auto，然后将高度设置为内容的实际高度（scrollHeight）。