Блог

У меня есть демо

Это простое приложение React, использующее Typescript.

Я пытаюсь использовать контекстный API Reacts

Я создал контекст ThemeContext с простыми значениями стиля темы для использования в других компонентах.

Затем я пытаюсь использовать контекст этой темы для оформления списка книг — Booklist.tsx

Моя проблема в том, что я вообще не могу заставить его работать, и ничего не отображается

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

index.tsx

 import React from 'react';
import BookList from './Booklist';
import ThemeContextProvider from './ThemeContext';

const App:React.FC = () => {
  return (
    <div className="App">
      <ThemeContextProvider>
        <BookList />
      </ThemeContextProvider>
    </div>
  );
}

export default App;
  

ThemeContext.tsx

 import React, {createContext} from 'react'

export interface Props {}

export interface State {
    lightTheme: boolean
    light:{syntax: string, ui: string, bg: string}
    dark:{syntax: string, ui: string, bg: string}
    toggleTheme:boolean
}

const defaultState:State = {
    lightTheme: true,
    light:{syntax:'', ui:'', bg:''},
    dark:{syntax:'', ui:'', bg:''},
    toggleTheme:false
}

export const ThemeContext = createContext(defaultState)

class ThemeContextProvider extends React.Component<Props, State> {

    constructor(props: Props){
        super(props)

        this.state = { 
            lightTheme: true,
            light: {syntax: '#555', ui: '#ddd', bg: '#eee'},
            dark: {syntax: '#ddd', ui: '#333', bg: '#555'},
            toggleTheme: false
        }
    }

    render() { 
        return (  
            <ThemeContext.Provider value={{...this.state}}>
                {this.props.children}
            </ThemeContext.Provider>
        );
    }
}

export default ThemeContextProvider;
  

Booklist.tsx

 import React from 'react'
import { ThemeContext } from './ThemeContext';

export interface Props {}

export interface State {
    lightTheme: boolean
    light:Darkness
    dark:Darkness
}

interface Darkness{
    syntax: string
    ui: string
    bg: string 
}

class BookList extends React.Component<Props, State> {
    render() { 
      return(
        <ThemeContext.Consumer>
        {(state) => {
          const { lightTheme, light, dark} = this.state
          const theme = lightTheme ? light : dark
          return(
                  <div style={{color: theme.syntax, background: theme.bg}}>
                      <ul>
                          <li style={{background:theme.ui}}>Book One</li>
                          <li style={{background:theme.ui}}>Book Two</li>
                      </ul>
                  </div>
          )
        }}</ThemeContext.Consumer>
      )
    }
}

export default BookList;
  

вам не хватает рендеринга

 import { render } from "react-dom";
  

 render(<App />, document.getElementById("root"));
  

в вашей демонстрации