Рубрики
Без рубрики

Реализация тематики в реакции

Когда я начал веб-разработку в React, я решил добавить тематические функциональные возможности в моем WebApp, который T … Теги от реагирования, JavaScript, UseContext, тематики.

Когда я начал веб-разработку в React, я решил добавить тематические функциональные возможности в моем webApp, который должен переключать тему каждого компонента внутри моего веб-сайта одним щелчком мыши. В интернете доступны много руководств Но я думаю, что они довольно сложны для начинающих, поэтому вот простой подход к добавлению тематики в вашем webApp.

Что вы должны знать?

Ну, есть несколько концепций, которые вы будете учиться сквозь путь. Чтобы понять вещи быстро взглянуть на эти концепции (I.e UseContext и stresestate крючки в API в React – React Context). Если вы уже знаете эти концепции, то вы хотите пойти, также вы найдете этот пост довольно прямо вперед.

Сейчас Переход к кодирующей части

Я создал свой проект с Create-raction-app Отказ Прежде всего, мы должны определить контекст глобально с

export const ThemeContext = React.createContext({
  theme: {
    type: 'light',
    primary: '#00bfa5',
    text: '#black'
  },
  setTheme: () => {}
})

Одежда, когда вам нужно использовать значение контекста, который вы должны импортировать его, в противном случае вы получите неопределенную ошибку. Теперь наш контекст с именем IMECONTEXT определяется глобально, но сможет потреблять его значение, мы должны обернуть компоненты с помощью Themecontext.Provider с некотором начальным значением. После этого мы можем использовать значение контекста внутри дочерних компонентов.

  return (
    
      {props.children}
    
  )

Теперь вы должны думать, где, черт возьми, я определил эту переменную. Ну, будьте терпеливы, это немного сложно, я сделал это состояние объектом, который может хранить несколько значений, а также методы, как const. Я сделал это, потому что я буду обновлять ценность контекста, доступая к этому объекту штата. Если это звучит с толку, вы видите код ниже, надеюсь, вы поймете это.

  export const ThemeContextProvider = props => {
  const theme = {
    light: {
      type: 'light',
      primary: '#0277bd',
      text: 'black'
    },
    dark:{
      type: 'dark',
      primary: '#212121',
      text: 'white'
    },
  }

  const setTheme = type => {
    setState({ ...state, theme: type === 'dark' ? theme.light : theme.dark })
  }

  const initState = {
    theme: theme.light,
    setTheme: setTheme
  }

  const [state, setState] = useState(initState)

  return (
    
      {props.children}
    
  )
}

Как я должен обновить стоимость объекта государства, который я использовал в USESTATE крючка для этого. Для тех, кто не знает об этом крючке, я бы сказал, когда нам нужно обновить состояние нашего компонента в функциональных компонентах, мы должны использовать этот крюк. Хотя для этого также есть к этому, но я охвачу это в другом посте. На данный момент вы должны думать об этом как об этом как единственным способом обновления состояния компонента.

Компонент Toggle Theme

Я создал этот компонент, чтобы переключить тему моего веб-сайта из любого места внутри нашего приложения, но одна вещь, которую вам нужно иметь в виду, это то, что вы должны обернуть все ваши компоненты с компонентом ThemeProvider, потому что когда мы переключаем тему, мы называем метод setState Это обновляет значение контекста.

import React, { useContext } from 'react'
import { ThemeContext } from './ThemeProvider'

function ToggleTheme() {
  const state = useContext(ThemeContext)

  const btn = {
    color: state.theme.textOnSecondary,
    marginTop: '20px',
    marginBottom: '20px',
    background: state.theme.secondary
  }

  return (
    
  )
}

export default ToggleTheme

Вы должны были заметить, что я еще не установил цвет любого компонента. Теперь, чтобы изменить цвет вашего компонента с изменением стоимости контекста, мы должны установить значение цвета из нашей ценности контекста, как это

import React, { useContext } from 'react'
import { ThemeContext } from './ThemeProvider'

export default function Footer() {
  const state = useContext(ThemeContext)

  const footer = {
    backgroundColor: state.theme.primary,
    color: state.theme.text,
    width: '100%',
    height: '50px',
  }

  return (
   
This is a Footer
) }

Наконец, вот как выглядит мой файл app.js:

import React from 'react'
import { ThemeContextProvider } from './components/ThemeProvider'
import AppBar from './components/AppBar'
import Footer from './components/Footer'
import ToggleTheme from './components/ToggleTheme'

function App() {

 return (
    
      
      
      
) } export default App

Я написал более подробную пост на тематику, подобное этому, вы также можете проверить это. Здесь это ссылка для этого. Это Является ли ссылка на мой репозиторий GitHUB для этого поста. Если у вас есть какие-либо вопросы, дайте мне знать в разделе комментариев.

Также не забудьте оформить заказ мой Сайт для других учебных пособий. Счастливое кодирование!

Оригинал: “https://dev.to/kiani0x01/implement-theming-in-react-3ocg”