React中能否在模板字面量中插入标签？附previewDescription示例

直接在模板字面量中插入HTML标签无法被React正常解析为DOM元素，你当前的写法最终渲染时会把<a>标签的源码直接作为文本显示，不会生成可点击的链接。

推荐方案：将previewDescription修改为JSX元素 #

该方案符合React开发规范，无安全风险，直接把字段值改为JSX结构即可，不需要拼接字符串：

const data = {
    activeProjectId: null,
    modalShow: false,
    projectsFlipped: false,
    menuShow: false,
    projects: [
        {
            id: 'project-title-0',
            title: 'Hello there!'.toUpperCase(),
            image: project11,
            medium: 'React, 3.js, SCSS, HTML',
            previewDescription: (
                <>
                    这个作品集网站基于React构建，使用Three.js实现飞星动画，结合CSS变换和原生JS滚动实现页面转场效果。建议搭配
                    <a href="音频链接地址">
                        LoFi音乐
                    </a>
                    浏览获得最佳体验。
                </>
            ),
            link: "项目预览地址",
            gitLink: "代码仓库地址",
        }
    ]
}

使用时直接渲染对应字段即可，React会正常解析其中的标签为DOM元素：

// 渲染示例
<div className="preview-desc">
    {project.previewDescription}
</div>

备选方案：使用dangerouslySetInnerHTML #

如果你必须保留字符串拼接的写法，可以在渲染时使用该API，仅适用于你完全确认内容来源安全的场景，存在XSS跨站脚本攻击风险：
渲染代码示例：

<div dangerouslySetInnerHTML={{__html: project.previewDescription}} />

内容的提问来源于stack exchange，提问作者Cody Powell