本文介绍如何在 React 中将用户输入的换行分隔文本自动转换为结构化的 元素数组，实现类似 wordhtml.com 的“文本→HTML”实时渲染效果，避免使用 dangerouslySetInnerHTML，确保 XSS 安全。
本文介绍如何在 react 中将用户输入的换行分隔文本自动转换为结构化的 `
` 元素数组，实现类似 wordhtml.com 的“文本→html”实时渲染效果，避免使用 `dangerouslysetinnerhtml`，确保 xss 安全。
在 React 开发中，常需将用户输入的纯文本（如带空行的段落）动态转为语义化 HTML 结构。但需注意：目标不是生成 HTML 字符串，而是生成 React 元素（JSX）——这才是 React 的推荐做法，既安全又符合数据驱动理念。
原始代码的问题在于：setOutputValue(htmlParagraphs.join("")) 将 HTML 写成字符串后直接插入 JSX（如
{outputValue}
），这等同于原样输出文本，React 会将其作为纯文本渲染，而非解析为 DOM 元素。更严重的是，若后续误用 dangerouslySetInnerHTML 渲染该字符串，将引入 XSS 风险。✅ 正确解法是：让 outputValue 状态直接保存 React 元素（即 JSX 片段），而非 HTML 字符串。React 会自动高效地渲染这些元素。
以下是优化后的完整实现：
import React, { useState, useEffect } from "react";
const InputOutput = () => {
const [inputValue, setInputValue] = useState("");
// ✅ 状态类型为 ReactNode（可存储 JSX 元素），而非 string
const [outputValue, setOutputValue] = useState(null);
useEffect(() => {
// 按换行分割，保留空行语义
const lines = inputValue.split("\n");
// 逐行映射为 <p> 元素：空行 → </p><p> </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，非空行 → <p>内容</p>
const paragraphElements = lines.map((line, index) => {
const trimmed = line.trim();
return (
<p key="{index}">
{trimmed === "" ? "\u00A0" : trimmed} {/* \u00A0 是 的 Unicode */}
</p>
);
});
setOutputValue(paragraphElements);
}, [inputValue]);
return (
<div classname="container">
<div classname="input-box">
<h2>Text</h2>
<textarea placeholder="Type here" value="{inputValue}" onchange="{(e)"> setInputValue(e.target.value)}
rows={6}
/>
</textarea>
</div>
<div classname="output-box">
<h2>HTML</h2>
<div classname="html-output">
{outputValue || <p><em>No content</em></p>}
</div>
</div>
</div>
);
};
export default InputOutput;
? 关键改进说明：
- 零 XSS 风险：全程不拼接 HTML 字符串，不调用 dangerouslySetInnerHTML，所有内容经 React 自动转义；
-
语义清晰：每行对应一个
，空行显式渲染为含 的段落，符合预期结构；
- 性能友好：useEffect 依赖 inputValue，仅在输入变化时重新计算；key={index} 确保列表更新稳定（若需更高稳定性，可结合内容哈希生成 key）；
- 用户体验增强：添加 rows={6} 提升 textarea 可见性；空状态提示提升健壮性。
? 进阶建议：
- 如需支持粗体、链接等简单富文本，可集成 remark + react-markdown 实现 Markdown 输入 → HTML 渲染；
- 若必须导出 HTML 字符串（如复制到编辑器），可用 ReactDOMServer.renderToStaticMarkup() 在服务端或 useCallback 中按需生成（切勿在客户端直接 innerHTML 插入！）。
通过将「HTML 字符串」思维切换为「React 元素」思维，你不仅解决了当前需求，更践行了 React 的核心设计哲学：声明式、安全、可组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
