React函数组件中如何用useState设置textarea的HTML值，等价于innerHTML操作

1. 给textarea设置HTML内容的实现 #

textarea属于React的受控表单元素，本身不会解析内部的HTML标签，赋值时直接将HTML格式的字符串绑定到value属性即可，配合useState的写法如下：

import { useState } from 'react';

function TextareaDemo() {
  // 状态可以直接存储HTML格式的字符串
  const [textareaVal, setTextareaVal] = useState('<div>待展示的HTML内容示例</div>');

  return (
    <textarea
      value={textareaVal}
      onChange={(e) => setTextareaVal(e.target.value)}
      rows={8}
      cols={60}
    />
  );
}

如果需要在可编辑区域内渲染解析后的HTML而非展示标签本身，不要使用textarea，改用设置了contenteditable属性的普通元素实现。

2. 等价原生document.getElementById("foo").innerHTML的React写法 #

对应两种使用场景分别有不同的实现方式：

• 场景1：给普通元素（div、span等）插入可解析的HTML内容，无需直接操作DOM，使用React内置的dangerouslySetInnerHTML属性配合useState即可：

import { useState } from 'react';

function InsertHtmlDemo() {
  const [htmlStr, setHtmlStr] = useState('<p>要插入的HTML片段</p>');

  // 等价于原生给id为foo的元素设置innerHTML
  return <div id="foo" dangerouslySetInnerHTML={{ __html: htmlStr }} />;
}

注意：dangerouslySetInnerHTML存在XSS注入风险，仅可用于渲染来源完全可信的HTML内容，禁止直接渲染未经过滤的用户输入内容。

• 场景2：需要手动读取/修改DOM元素的innerHTML，使用useRef获取DOM实例即可：

import { useRef, useEffect } from 'react';

function OperateInnerHtmlDemo() {
  const fooRef = useRef(null);

  useEffect(() => {
    // 等价原生的设置innerHTML
    fooRef.current.innerHTML = '<p>通过ref设置的HTML内容</p>';
    // 等价原生的读取innerHTML
    console.log(fooRef.current.innerHTML);
  }, []);

  return <div ref={fooRef} id="foo"></div>;
}

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