图标className不会在状态更改时更新

Question

我正在尝试有史以来最简单的主题切换，以响应上下文，并且似乎无法在上下文更改时重新渲染图标。其他所有内容都可以正常工作：颜色，背景图像...它会根据初始状态呈现任何一个图标，但是切换主题时图标不会更新。

import React, { useContext } from "react"
import { ThemeContext } from "../../contexts/ThemeContext"

const ThemeToggle = () => {
  const { isDarkMode, dark, light, toggleTheme } = useContext(ThemeContext)
  const theme = isDarkMode ? dark : light
  return (
    <li
      style={{ background: theme.bgPrimary, color: theme.text }}
      onClick={toggleTheme}
    >
      <i className={theme.ico} />
    </li>
  )
}

export default ThemeToggle

上下文：

import React, { Component, createContext } from "react"

export const ThemeContext = createContext()

class ThemeContexProvider extends Component {
  state = {
    isDarkMode: false,
    light: {
      text: "#333",
      bgPrimary: "#eee",
      bgSecondary: "#333",
      ico: "fas fa-moon"
    },
    dark: {
      text: "#ddd",
      bgPrimary: "#000003",
      bgSecondary: "#bbb",
      ico: "fas fa-sun"
    }
  }
  toggleTheme = () => {
    this.setState({ isDarkMode: !this.state.isDarkMode })
  }
  render() {
    return (
      <ThemeContext.Provider
        value={{ ...this.state, toggleTheme: this.toggleTheme }}
      >
        {this.props.children}
      </ThemeContext.Provider>
    )
  }
}

export default ThemeContexProvider

Answer 1

我已修复了此安装专用的react fa软件包的安装，仍然不知道为什么上述方法不起作用。虽然有效：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faMoon } from "@fortawesome/free-solid-svg-icons"
import { faSun } from "@fortawesome/free-solid-svg-icons"
//.....
  return (
    <li
      style={{ background: theme.bgPrimary, color: theme.text }}
      onClick={toggleTheme}
    >
      {isDarkMode ? (
        <FontAwesomeIcon icon={faSun} />
      ) : (
        <FontAwesomeIcon icon={faMoon} />
      )}
    </li>

Answer 2

[我怀疑您的ico属性中的空格可能是问题。通常，这对州/道具不是问题。这可能归咎于上下文。这可能会解决它：

<i className={`fas ${theme.ico}`} />

仅将更改ico和fa-moon的类替换为上下文fa-sun属性>