react如何encode

React 中编码的实现方式

在 React 中，编码通常涉及对 URL、HTML 实体或特殊字符的处理。以下是几种常见的编码方法：

使用 encodeURIComponent 进行 URL 编码

JavaScript 内置的 encodeURIComponent 函数可以对 URL 参数进行编码，避免特殊字符破坏 URL 结构。例如：

const query = 'React & JavaScript';
const encodedQuery = encodeURIComponent(query); // 输出 "React%20%26%20JavaScript"

使用 decodeURIComponent 进行 URL 解码

解码 URL 参数时使用 decodeURIComponent：

const decodedQuery = decodeURIComponent(encodedQuery); // 输出 "React & JavaScript"

处理 HTML 实体编码

使用 dangerouslySetInnerHTML 或第三方库（如 he）处理 HTML 实体：

import he from 'he';

const htmlEntity = '<div>Hello</div>';
const decodedHtml = he.decode(htmlEntity); // 输出 "<div>Hello</div>"

Base64 编码与解码

通过 btoa 和 atob 实现 Base64 编码和解码：

const text = 'React Encoding';
const encodedText = btoa(text); // 编码为 Base64
const decodedText = atob(encodedText); // 解码

注意事项

• 直接操作 HTML 时需谨慎，避免 XSS 攻击。推荐使用 React 的默认转义机制或经过验证的库。
• URL 编码时区分 encodeURI（对整个 URL）和 encodeURIComponent（对参数部分）。
• 对于复杂场景（如表单提交或 API 请求），确保前后端编码方式一致。