React如何将HTML元素存入state以在textarea中渲染带样式按钮

核心问题原因 #

原生<textarea>只支持展示纯文本，无法渲染任何自定义HTML元素或样式。你把JSX对象（<div><button>{field.title}</button></div>本质是JS对象）拼接进字符串时，对象会被强制转为[object Object]，这就是你看到异常输出的原因，就算你手动拼接HTML字符串塞给textarea，它也只会把HTML源码当纯文本展示，不会解析渲染。

可行实现方案 #

你要做的带自定义胶囊标签的输入效果，本质是轻量富文本输入，需要用带contenteditable属性的普通div模拟输入框，而不是原生textarea。

具体实现思路

1. 替换原生textarea为可编辑div，开启contentEditable="true"，用CSS模拟textarea的外观样式
2. State不要存字符串+JSX的混合内容，而是结构化存储内容，区分普通文本和标签类型
3. 渲染时根据内容类型处理：普通文本直接输出，标签类型渲染为你要的胶囊样式按钮

示例代码参考

import { useState, useRef } from 'react';

// 结构化存储内容：区分普通文本/标签两种类型
const [content, setContent] = useState([
  { type: 'text', content: '' }
]);
const editorRef = useRef(null);

// 模拟输入框代码
<div
  ref={editorRef}
  contentEditable
  style={{ height: 150 }}
  className="border-4 rounded-0 p-2 focus:outline-none"
  placeholder="What should your customers know?"
  onInput={(e) => {
    // 可自行实现普通文本输入的内容同步逻辑，也可以用现成的富文本库简化开发
  }}
>
  {content.map((item, index) => {
    if (item.type === 'tag') {
      // 标签渲染为胶囊样式
      return <span key={index} className="inline-block bg-gray-200 px-2 py-0.5 rounded-full mx-1">{item.content}</span>
    }
    return <span key={index}>{item.content}</span>
  })}
</div>

// 下拉选项点击逻辑
{fields.map(field => ( 
  <div key={field.id}>
    <DropdownItem 
      onClick={() => {
        // 插入标签到内容末尾，后面加个空文本方便后续继续输入
        setContent(prev => [
          ...prev,
          { type: 'tag', content: field.title },
          { type: 'text', content: ' ' }
        ])
      }}
    >
      <span className="d-flex justify-content-between fs--1 text-black">
        <span className="font-weight-semi-bold">{field.title}</span>
      </span>
    </DropdownItem>
  </div>
))}

如果不想自己处理可编辑div的光标定位、内容同步等细节，可以直接用成熟的轻量富文本编辑器库，比如react-quill、draft.js，都支持自定义插入标签的能力，开发成本更低。

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