React 拼接标签转换为HTML

在JavaScript中处理混杂字符与HTML标签的识别与转换,

原创于 2024-03-12 08:45:00 发布 · 568 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

本文介绍了在JavaScript中处理字符串时遇到混杂字符和HTML标签的情况，重点讲解了如何使用`dangerouslySetInnerHTML`属性来安全地将包含标签的字符串转化为HTML。作者南国以南i强调了代码示例中的`<hr>`分隔符和`<sup>`上标符号的应用。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
在JS中混杂字符和HTML标签，识别方法：
总结

前言

请各大网友尊重本人原创知识分享，谨记本人博客：南国以南i、

提示：以下是本篇文章正文内容，下面案例可供参考

在JS中混杂字符和HTML标签，识别方法：

const menuList = ['门店', '星享俱乐部', '菜单', '<hr></hr>', '星巴克移动应用', '星礼卡', '星巴克臻选<sup>TM</sup>', '咖啡星讲堂', '上海烘培工坊', '关于星巴克', '帮助中心', '<hr></hr>'];

const listItems = menuList.map((item,index) =><li key={index} dangerouslySetInnerHTML={{ __html: item }}></li>);

// dangerouslySetInnerHTML：将JS中的标签转化为HTML语言，<hr>是分隔符,<sup>是上标