基于菜单可见状态切换FontAwesome按钮图标异常排查

嘿，我看你已经搞定了菜单的展开收起逻辑，而且确认visible状态确实在正常变更（h/g字符能交替显示），但FontAwesome图标就是没跟着切换对吧？这种情况我之前也碰到过，大概率是React的DOM复用机制或者FontAwesome的渲染方式导致的，给你几个靠谱的解决思路：

思路1：给条件渲染的元素加唯一key #

React会尽量复用相同结构的DOM节点，有时候它会认为两个<i>标签是同一个元素，只是className变了，但FontAwesome的样式可能因为缓存或者DOM节点复用没更新。给两个条件渲染的外层div加上唯一的key，让React明确知道这是两个独立的元素：

{ (!this.state.visible) ? (
  <div className="hello" key="menu-open">
    <i className="fas fa-bars fa-2x"></i>h
  </div> 
) : (
  <div className="goodbye" key="menu-close">
    <i className="fas fa-times fa-2x"></i>g
  </div>
) }

思路2：动态切换className而非替换元素 #

不用渲染两个不同的div，而是根据visible状态直接修改图标的className，这样React只需要更新DOM的class属性，更高效也不容易出问题：

<div className="site-nav--btn site-nav-trigger open" onMouseDown={this.handleMouseDown} menuVisibility={this.state.visible} >
  <div className={this.state.visible ? "goodbye" : "hello"}>
    <i className={`fas fa-2x ${this.state.visible ? "fa-times" : "fa-bars"}`}></i>
    {this.state.visible ? 'g' : 'h'}
  </div>
</div>

思路3：改用FontAwesome官方React组件 #

如果是用CDN引入的FontAwesome，有时候会碰到样式加载的缓存问题。改用官方的React组件会更可靠，步骤如下：

1. 先安装依赖（如果还没装）：

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

2. 在组件中导入图标和组件：

import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

3. 替换原来的<i>标签：

{ (!this.state.visible) ? (
  <div className="hello">
    <FontAwesomeIcon icon={faBars} size="2x" />h
  </div> 
) : (
  <div className="goodbye">
    <FontAwesomeIcon icon={faTimes} size="2x" />g
  </div>
) }

这种方式是官方推荐的，能避免很多原生<i>标签带来的样式问题。

验证建议 #

你可以先试试思路1，改动最小，能快速验证是不是DOM复用的问题。如果不行，再试试思路2，或者直接升级到官方组件（思路3），长期来看更稳定。

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