Значок className не обновляется при изменении состояния - PullRequest
Новая
       22

Значок className не обновляется при изменении состояния

0 голосов
/ 05 марта 2020

Я пытаюсь выполнить простейшее переключение тем в реакции с контекстом и, кажется, не могу перерисовать значок при изменении контекста. Все остальное работает просто отлично: цвета, фоновое изображение ... Он отображает любой из значков в зависимости от исходного состояния, но значок не обновляется при переключении темы. 

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

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Я подозреваю, что проблема может быть связана с пробелами в вашем ico свойстве. Обычно это не проблема для штата / реквизита. Возможно, в этом виноват контекст. Это может это исправить: 

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

Замените свой контекст ico свойства только классом, который изменяет fa-moon и fa-sun

0 голосов
/ 05 марта 2020

Я исправил эту установку, выделенный пакет реагирования, все еще не знаю, почему выше не работает Это работает, хотя: 

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>
...