react如何在div追加内容
使用 innerHTML 追加内容
直接操作 DOM 元素的 innerHTML 属性可以快速追加内容，但需要注意潜在的安全风险（如 XSS 攻击）。
const divRef = useRef(null);
const appendContent = () => {
if (divRef.current) {
divRef.current.innerHTML += "<p>追加的内容</p>";
}
};
return (
<div ref={divRef}>
<button onClick={appendContent}>追加内容</button>
</div>
);使用 document.createElement 动态创建元素
通过原生 DOM API 动态创建元素并追加到目标节点，适合需要精细控制元素属性的场景。
const divRef = useRef(null);
const appendContent = () => {
if (divRef.current) {
const newElement = document.createElement("p");
newElement.textContent = "动态创建的内容";
divRef.current.appendChild(newElement);
}
};
return (
<div ref={divRef}>
<button onClick={appendContent}>追加内容</button>
</div>
);通过 React 状态管理追加内容
利用 React 的状态（useState）和列表渲染实现内容追加，推荐用于遵循 React 数据驱动的场景。
const [contents, setContents] = useState([]);
const appendContent = () => {
setContents([...contents, "新追加的内容"]);
};
return (
<div>
<button onClick={appendContent}>追加内容</button>
<div>
{contents.map((content, index) => (
<p key={index}>{content}</p>
))}
</div>
</div>
);使用 dangerouslySetInnerHTML
适用于需要插入 HTML 字符串且信任内容来源的情况，需显式声明风险。
const [htmlContent, setHtmlContent] = useState("<p>初始内容</p>");
const appendContent = () => {
setHtmlContent(prev => prev + "<p>追加的HTML内容</p>");
};
return (
<div>
<button onClick={appendContent}>追加内容</button>
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
</div>
);使用第三方库（如 jQuery）
若项目中已依赖 jQuery，可通过其方法简化 DOM 操作，但需注意与 React 的兼容性。
useEffect(() => {
$("#targetDiv").append("<p>通过jQuery追加的内容</p>");
}, []);
return <div id="targetDiv"></div>;注意事项
- 性能优化：频繁操作 DOM 时，优先使用 React 状态管理而非直接 DOM 操作。
- 安全性：避免直接插入用户输入的 HTML，防止 XSS 攻击。
- SSR 兼容性：服务端渲染（SSR）场景下，直接 DOM 操作可能报错，需通过
useEffect或生命周期钩子控制。
