reactjs - React 的 Context API 和 typescript

问题描述

我有一个演示

它是一个使用 Typescript 的简单 React 应用程序。

我正在尝试使用 Reacts Context api

我创建了一个ThemeContext包含简单主题样式值的上下文，以便在其他组件中使用。

然后，我尝试使用此主题上下文来设置书籍列表的样式-Booklist.tsx

我的问题是我根本无法让它工作并且没有任何显示

抱歉，我知道这很模糊，但任何人都可以帮忙看看我哪里出错了。

索引.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;

书单.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;

标签： reactjstypescriptreact-context

reactjs - React 的 Context API 和 typescript

问题描述

解决方案

推荐阅读