React/NextJS中无法用&#13;或<br>为textarea设置换行的问题

• 别用HTML实体或标签：
、<br>这类写法在textarea的value里只会被当成普通文本，不会解析成换行。因为textarea的value是纯文本内容，不支持HTML解析。
• 用原生换行符：直接在字符串里使用\n（换行符）或者\r\n（回车+换行，兼容部分旧系统）来表示换行。

修正后的代码示例 #

import { useState } from 'react';

export default function TextAreaDemo() {
  const [textAreaValue, setTextAreaValue] = useState('');

  // 初始化或更新值时用原生换行符
  const handleSetValue = () => {
    setTextAreaValue('a\nbc\ndef\nghijkl');
  };

  return (
    <div>
      <button onClick={handleSetValue}>设置带换行的内容</button>
      <textarea
        id="response"
        name="response"
        value={textAreaValue}
        rows={5}
      />
    </div>
  );
}

补充说明 #

rows属性的作用是设置textarea控件的初始可见行数，用来控制控件高度，和内容是否自动换行完全无关。如果需要让内容超出宽度时自动换行，可以给textarea添加wrap="soft"属性（默认就是soft，一般不需要额外设置），这样内容会在视觉上换行，提交时还是按原始换行符处理。

内容的提问来源于stack exchange，提问作者gene b.