Переключение изображения кнопки в React

Я пытаюсь переключить значок на кнопку в ответ, но я пробовал все, и ничего не работает. Я могу изменить цвет фона/текста, переключая onClick, но мне не хватает чего-то, чтобы изменить значок, и я не знаю, что! Любая помощь?

Вот мой код: App.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import Layout from "./layout";
import ThemeContext, { themes } from "./theme-context";
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'

function App() {

  const sun = <FontAwesomeIcon icon={faSun} />
  const moon = <FontAwesomeIcon icon={faMoon} />

  const [theme, setTheme] = useState(themes.dark)


  const toggleTheme = () => theme === themes.dark ? setTheme(themes.light) : setTheme(themes.dark)


  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={toggleTheme}>


        {sun}



      </button>
      <Layout />
    </ThemeContext.Provider>
  );
}

export default App;

тема-контекст.js

import React from "react"


export const themes = {
    dark: {
        color: "white",
        background: "black",
        padding: "5px",
        width: "200px",
        textAlign: "center",
    },
    light: {
        color: "black",
        background: "white",
        padding: "5px",
        width: "200px",
        textAlign: "center",


    }

}

const ThemeContext = React.createContext(themes.dark)

export default ThemeContext;

layout.jsx

import React, { useContext } from "react";
import ThemeContext from "./theme-context";

const Layout = () =>{

const theme = useContext(ThemeContext)
return (
    <div style={theme} >
<p>This is your content</p>
</div>
)
}

export default Layout;

Я пробовал {themes.dark? : {солнце} ? {moon}} но это не сработало.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

{themes.dark? : {sun} ? {moon}} был очень близок к правильному (хотя с точки зрения концепции синтаксис неверен). Вместо этого вам нужно было сделать следующее: { theme === themes.dark ? sun : moon } В исходном фрагменте вы просто проверяли, является ли themes.dark значением правдивый, которое всегда будет возвращать значение true, поскольку это объект. Что вам нужно было сделать, так это проверить, совпадает ли текущая тема с themes.dark.

Надеюсь это поможет.

обратите внимание, что вокруг переменных солнца и луны нет квадратных скобок, потому что они уже являются компонентами и находятся в блоке интерполяции. Оборачивая их таким образом, они просто заменяются объектом, содержащим ключ, который является либо sun, либо moon со значением компонента.

ErrorGamer2000 22.04.2022 23:15

Я ПРИНАДЛЕЖУ ТЕБЕ СВОЕЙ ДУШЕ. Спасибо, что вы так добры и так хорошо объясняете!! Я понял!

Mermaid 22.04.2022 23:27

Без проблем. Просто отметьте это как ответ, чтобы другие тоже могли извлечь из этого пользу!

ErrorGamer2000 23.04.2022 03:26

Другие вопросы по теме