Context_应用

• 创建Context对象

  React.createContext(defaultValue)

  xxxxxxxxxx
  const MyContext = React.createContext(defaultValue);
  

• Context的Provider组件

  Contenxt的Provider组件用来提供其它组件要共享的数据。

  设置value属性来设置要共享的数据。

  xxxxxxxxxx
  <MyContext.Provider value={/* 某个值 */}>
  

  提示：

  我们把要使用共享数据的组件称为消费组件。

• Class.contextType

  为组件类添加contextType属性，从而获取Context对象。

  xxxxxxxxxx
  MyClass.contextType = MyContext;
  

  提示：

  挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext()创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。

  你可以在任何生命周期中访问到它，包括 render 函数中。

xxxxxxxxxx
//MyContext.js
import React from "react";

export default React.createContext({name:'',account:'xxx'})

xxxxxxxxxx
//ContextTest.js
import React from 'react'
import MyContext from './MyContext'
import NavBar from './NavBar'

export default class ContextTest extends React.Component {
    constructor(props) {
        super(props)
        this.state = { user: { name: '百战', account: 'baizhan' } }
    }
    
    render() {
        return <div>
              {/* 使用Provider组件提供数据 */}
            <MyContext.Provider value={this.state.user }>
                <NavBar />
            </MyContext.Provider>

        </div>
    }
}

xxxxxxxxxx
//NabBar.js
import React, { Component } from 'react'
import UserInfo from './UserInfo'

export default class NabBar extends Component {
  render() {
    return (
      <div style={{height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
        NabBar的内容
        <UserInfo />
        
        </div>
    )
  }
}

xxxxxxxxxx
//UserInfo.js
import React, { Component } from 'react'
import MyContext from './MyContext'

export default class UserInfo extends Component {
  render() {
    console.log(this.context)
    return (
      <div>你好，欢迎 {this.context.account}</div>
    )
  }
}
//设置类的contentType属性，从而获取context对象
UserInfo.contextType=MyContext

实时效果反馈

1. 使用___什么创建Context对象：

A React.Context

B React.createcontext()

C React.createContext()

D React.contextType

2. 消费组件使用___获取Context对象：

A class.Context=MyContext

B React.contextType=MyContext

C class.contextType=MyContext

D class.contexttype=MyContext

答案

1=>C 2=>C