React使用Font Awesome Unicode切换按钮图标显示异常如何解决

问题根因 #

React默认会转义所有插入JSX的字符串内容，避免XSS安全风险，因此你写的这类HTML实体不会被解析为对应字符，会直接作为纯文本输出。你直接操作DOM的innerHTML报错，是因为React组件渲染流程中直接访问DOM可能拿到未挂载的空节点，也不符合React的声明式写法规范。

解决方法 #

方案1：使用JS Unicode转义（最简单） #

直接把HTML实体替换为JS的Unicode转义写法，不需要额外API，修改对应代码即可：

import React from 'react'
import { useState } from 'react'

const Watch = () => {
    const [isPlaying, setIsPlaying] = useState(false)

    const toggleVideo = () => {
        setIsPlaying(!isPlaying)
    }

    return (
        <button id='play' onClick={toggleVideo} className='fa'>
            {isPlaying ? '\uf04b' : '\uf04c'}
        </button>
    )
}

export default Watch

方案2：使用dangerouslySetInnerHTML（适配原有HTML实体写法） #

如果要保留原有的HTML实体写法，用React官方提供的dangerouslySetInnerHTML属性注入内容，不要直接操作DOM的innerHTML：

return (
    <button 
        id='play' 
        onClick={toggleVideo} 
        className='fa'
        dangerouslySetInnerHTML={{
            __html: isPlaying ? '&#xf04b;' : '&#xf04c;'
        }}
    />
)

方案3：使用Font Awesome官方React组件（最规范） #

直接安装Font Awesome的React官方包，不用手动处理Unicode，代码可读性和可维护性更高：
首先安装依赖：
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
修改组件代码：

import React from 'react'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons'

const Watch = () => {
    const [isPlaying, setIsPlaying] = useState(false)

    const toggleVideo = () => {
        setIsPlaying(!isPlaying)
    }

    return (
        <button id='play' onClick={toggleVideo}>
            <FontAwesomeIcon icon={isPlaying ? faPlay : faPause} />
        </button>
    )
}

export default Watch

注意事项 #

无论用哪种方案，都要确保你已经在项目入口文件或者HTML中正确引入了Font Awesome的全局CSS样式，否则图标无法正常渲染。

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