React 的 Context API Cosumer 没有渲染 Children

Posted 2023-03-15

【中文标题】React 的 Context API Cosumer 没有渲染 Children

【英文标题】：React's Context API Cosumer is not rendering Children

【发布时间】：2019-01-19 09:58:24

【问题描述】：

我正在使用 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>

渲染的组件。

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

【参考方案1】：

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

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

应该是

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