javascript - 从嵌套组件更新上下文不起作用

我是新来的响应者，我正在尝试使用Context API在主题中传递主题字符串并在父级和子级之间传递toggleTheme函数。我正在通过少量修改https://reactjs.org/docs/context.html来练习React Doc的示例
我的代码如下:

import React from 'react';
const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {}
})
class MouseTracker2 extends React.Component {
  constructor(props) {
    super(props);
    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === 'dark'
            ? 'light'
            : 'dark',
      }));
    };
    this.state={
      theme: 'dark',
      toggleTheme: this.toggleTheme
      }
    }
  render() {
    return (
      <div>
        <ThemeContext.Provider value={this.state}>
          <Abc />
        </ThemeContext.Provider>
      </div>
    )
  }
}
class Abc extends React.Component {
  render() {
    return (
    <div>
      <ThemeContext.Consumer>
        {({theme,toggleTheme}) => {return(<Def theme={theme} onClick=
 {toggleTheme} />)}}
      </ThemeContext.Consumer>
    </div>
    )
  }
}
class Def extends React.Component {
  render() {
    return (
      <div>
        <p>efgh</p>
        <div>{this.props.theme}</div>
      </div>
    )
  }
}
export default MouseTracker2

在上面的代码中，上下文将字符串从父级正确传递给子级。但是，它不是将功能从父级传递到子级。
提前致谢 :)

最佳答案

toggleTheme函数通过名称Def传递给onClick，因此this.props.toggleTheme不可用，可以由this.props.onClick访问

class MouseTracker2 extends React.Component {
  constructor(props) {
    super(props);
    this.toggleTheme = () => {
      this.setState(state => ({
        theme: state.theme === "dark" ? "light" : "dark"
      }));
    };
    this.state = {
      theme: "dark",
      toggleTheme: this.toggleTheme
    };
  }
  render() {
    return (
      <div>
        <ThemeContext.Provider value={this.state}>
          <Abc />
        </ThemeContext.Provider>
      </div>
    );
  }
}
class Abc extends React.Component {
  render() {
    return (
      <div>
        <ThemeContext.Consumer>
          {({ theme, toggleTheme }) => {
            return <Def theme={theme} onClick={toggleTheme} />;
          }}
        </ThemeContext.Consumer>
      </div>
    );
  }
}
class Def extends React.Component {
  render() {
    return (
      <div>
        <p>efgh</p>
        <div>{this.props.theme}</div>
        <button onClick={this.props.onClick}>Toggle</button>
      </div>
    );
  }
}

Working Codesandbox