本文介绍如何在 React 中将用户输入的换行分隔文本自动转换为结构化的 <p> 元素数组，实现类似 wordhtml.com 的“文本→HTML”实时渲染效果，避免使用 dangerouslySetInnerHTML，确保 XSS 安全。
本文介绍如何在 react 中将用户输入的换行分隔文本自动转换为结构化的 `
` 元素数组，实现类似 wordhtml.com 的“文本→html”实时渲染效果，避免使用 `dangerouslysetinnerhtml`，确保 xss 安全。
在 React 开发中，常需将用户输入的纯文本（如带空行的段落）动态转为语义化 HTML 结构。但需注意：目标不是生成 HTML 字符串，而是生成 React 元素（JSX）——这才是 React 的推荐做法，既安全又符合数据驱动理念。
原始代码的问题在于：setOutputValue(htmlParagraphs.join("")) 将 HTML 写成字符串后直接插入 JSX（如 <div>{outputValue}</div>），这等同于原样输出文本，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>内容</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}
/>
</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 自动转义；
- 语义清晰：每行对应一个 <p>，空行显式渲染为含 的段落，符合预期结构；
- 性能友好：useEffect 依赖 inputValue，仅在输入变化时重新计算；key={index} 确保列表更新稳定（若需更高稳定性，可结合内容哈希生成 key）；
- 用户体验增强：添加 rows={6} 提升 textarea 可见性；空状态提示提升健壮性。
? 进阶建议：
- 如需支持粗体、链接等简单富文本，可集成 remark + react-markdown 实现 Markdown 输入 → HTML 渲染；
- 若必须导出 HTML 字符串（如复制到编辑器），可用 ReactDOMServer.renderToStaticMarkup() 在服务端或 useCallback 中按需生成（切勿在客户端直接 innerHTML 插入！）。
通过将「HTML 字符串」思维切换为「React 元素」思维，你不仅解决了当前需求，更践行了 React 的核心设计哲学：声明式、安全、可组合。
