React 的 Context API Cosumer 没有渲染 Children

Question

我正在使用 React Context API 和本教程实现主题切换器 https://www.youtube.com/watch?time_continue=1&v=oDgxUodLwGU

我从制作上下文开始

    export default React.createContext({
       theme: dark
    });

然后我定义了我的主题（黑暗和光明）

然后我创建了一个组件（TodoList）

import React from 'react';
import styled from 'styled-components';

const List = styled.ul`
    background: ${props => {
        debugger;
        props.theme.background;
    }};
    color: ${props => props.theme.color};
    font-family: sans-serif;
    font-size: 20px;

    li {
        line-height: 36px;
    }
`;

const TodoList = () => {
    debugger;
    return (
        <List>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </List>
    );
};

export default TodoList;

然后在我的应用组件中，我使用了下面的代码

import React, {
  Component
} from 'react';
import './App.css';
import TodoList from './components/TodoList';
import ThemeSwitcher from './components/ThemeSwitcher';
import * as themes from './styles/themes';
import ThemeContext from './styles/themes/context';
import { ThemeProvider } from 'styled-components';

class App extends Component {
  state = {
    theme: themes.dark,
  };

  toggleTheme = () => {
    this.setState({ theme: this.state.theme === themes.dark ? themes.light : themes.dark });
  };

  render() {
    console.log(this.state.theme);
    return (
      <div id="root">
        <ThemeContext.Provider value={this.state}>
          <ThemeSwitcher toggleTheme={this.toggleTheme} />
          <ThemeContext.Consumer>
            {theme => {
              <ThemeProvider theme={theme}>
                <TodoList />
              </ThemeProvider>
            }}
          </ThemeContext.Consumer>
        </ThemeContext.Provider>
      </div>
    );
  }
}

export default App;

当我在 ThemeContext.Consumer 之外使用 TodoList 组件时，它渲染得很好，但在它内部永远不会渲染。 TodoList 组件中的断点永远不会被命中...

我也尝试忽略 ThemeContext.Consumer 并使用下面的 sn-p：

<ThemeProvider theme={theme}>
          <TodoList />
        </ThemeProvider>

渲染的组件。

我可能做错了什么？ 提前致谢。

Answer 1

我能够确定问题所在，它与下面的 sn-p 相关：

<ThemeContext.Consumer>
            {theme => {
              <ThemeProvider theme={theme}>
                <TodoList />
              </ThemeProvider>
            }}
          </ThemeContext.Consumer>

应该是

<ThemeContext.Consumer>
            {theme => {
              return (
                <ThemeProvider theme={theme}>
                  <TodoList />
                </ThemeProvider>
              );
            }}
          </ThemeContext.Consumer>