单击按钮时更改React主题上下文

Question

Main.js

import React from "react"
//import PropTypes from "prop-types"
import ThemeContext from "./ThemeContext"

function Button(props) {
    return (
        <ThemeContext.Consumer>
            {theme => (
                <button className={`${theme}-theme`}>Switch Theme</button>
            )}
        </ThemeContext.Consumer>
    )    
}

export default Button

index.js

import ReactDOM from 'react-dom';
import App from './App';
import ThemeContext from "./ThemeContext"



ReactDOM.render(
    <ThemeContext.Provider value={"dark"}>
       <App /> 
    </ThemeContext.Provider>, 
    document.getElementById('root'));

大家好，我试图了解如何将Context与React一起使用。我上面的代码试图将主题从浅色变为深色。现在，如果我将“深色”更改为“浅色”，则可以手动更改页面的主题，但是我只想通过单击按钮来完成此操作。今天尝试去上班一直很沮丧，我在Google上搜索了很多，但是我发现的所有内容都有些复杂，我想我听不懂。任何帮助，将不胜感激。谢谢

Answer 1

如何传递回调以更改主题以及上下文中的主题数据？类似于：