老师，context有些疑问需要请教

问题描述：

老师，context有些疑问需要请教

context定义位置：一般是定义在最外层组件的class外面吗？
老师的案例里面所有组件都写在一个js中，但一般一个组件会有一个单独的js，这样的话，在每个组件中怎么获取最外层组件js文件中设置的context？

慕姐5289795 2021-08-05

源自：框架面试课 6-16 是否用过React Context

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2021-08-06 13:40:53

同学你好，问题解答如下：

1、创建context一般在最外层父组件中，用变量接收，所以在class外面定义即可

2、如果将多个组件分开，那么也需要将创建context的语句放在js中，各个组件引入使用。例如：

App.js

自己测试下，祝学习愉快！

收起回答

慕姐5289795 提问者 #1

那老师，如果context中需要放置多个信息怎么设置呢？比如需要放置主题还有语言？

2021-08-07 16:07:10

好帮手慕星星 2021-08-07 18:58:24

同学你好，可以定义context值为对象，例如：

import React from 'react'
const themes = {
  light: {
    text:'light',
    language:'eg'
  },
  dark: {
    text: 'dark',
    language:'en'
  },
};
// 创建 Context 填入默认值（任何一个 js 变量）
// const ThemeContext = React.createContext('light')
const ThemeContext = React.createContext(themes.light)

// 底层组件 - 函数是组件
function ThemeLink (props) {
    // const theme = this.context // 会报错。函数式组件没有实例，即没有 this

    // 函数式组件可以使用 Consumer
    return <ThemeContext.Consumer>
        { ({text,language}) => <p>link's theme is {text}--{language}</p> }
    </ThemeContext.Consumer>
}

// 底层组件 - class 组件
class ThemedButton extends React.Component {
    // 指定 contextType 读取当前的 theme context。
    // static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContext
    render() {
        const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。

        return <div>
            <p>button's theme is {theme.text}--{theme.language}</p>
        </div>
    }
}
ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
            <ThemeLink />
        </div>
    )
}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            theme: themes.light
        }
    }
    render() {
        return <ThemeContext.Provider value={this.state.theme}>
            <Toolbar />
            <hr/>
            <button onClick={this.changeTheme}>change theme</button>
        </ThemeContext.Provider>
    }
    changeTheme = () => {
        this.setState({
            theme: this.state.theme === themes.light ? themes.dark : themes.light
        })
    }
}

export default App