Context 跨组件传值方法

Context 跨组件传值方法

app.js

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'


function App() {
  return (
    <div className="App">
      <ContextPage />
    </div>
  );
}

export default App;

父组件 ContextPage.js

import React, { Component } from 'react'
// 引入子组件ContextTypePage
import ContextTypePage from './ContextTypePage'

// 第一步创建一个Context对象
// const ThemeContext = React.createContext ()
export default class ContextPage extends Component {
 constructor(props){
   super(props)
   this.state={
     theme: {
       themeColor: 'red'
     }
   }
 }
  render() {
    // 通过props传递
    // 把constructor的属性 theme 拿出来
    const { theme } = this.state
    return (
      <div>
        <h3>ContextPage</h3>
        <ContextTypePage {...theme} />
      </div>
    )
  }
}

子组件ContextTypePage.js

import React, { Component } from 'react'

export default class ContextTypePage extends Component {
  render() {
    // 通过props父组件传递给子组件
    const { themeColor } = this.props
    return (
      <div>
         <h3 className= { themeColor } >ContextTypePage</h3>
      </div>
    )
  }
}

react Context方法

contextType只能使用在class组件中，而且只能赋值一次

公共方法Context.js 作用定义一个Context对象

import React from 'react'
// 定义一个公共context 方法
export const ThemeContext = React.createContext ()

app.js

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'


function App() {
  return (
    <div className="App">
      <ContextPage />
    </div>
  );
}

export default App;

contextPage.js

import React, { Component } from 'react'
// 引入子组件ContextTypePage
import ContextTypePage from './ContextTypePage'
// 引入公共的Context.js
import { ThemeContext } from '../Context'

// // 第一步创建一个Context对象
// const ThemeContext = React.createContext ()
export default class ContextPage extends Component {
 constructor(props){
   super(props)
   this.state={
     theme: {
       themeColor: 'red'
     }
   }
 }
  render() {
    // // 通过props传递
    // 把constructor的属性 theme 拿出来
    const { theme } = this.state
    return (
      <div>
        <h3>ContextPage</h3>
        {/* 第二步使用provider传递给子组件,同时通过value把值传递给子组件 */}
        <ThemeContext.Provider value= { theme }>
         <ContextTypePage  />
        </ThemeContext.Provider>
        
      </div>
    )
  }
}

ContextTypePage.js

import React, { Component } from 'react'
import {ThemeContext} from '../Context'


export default class ContextTypePage extends Component {
  static contextType = ThemeContext
  render() {
    // 定义Context
    const { themeColor } =  this.context;
    // 通过props父组件传递给子组件
    console.log("this", this)
    // 通过static拿到themeContext
    return (
      <div>
         <h3 className={themeColor}>ContextTypePage</h3>
      </div>
    )
  }
}

在render函数中打印this会出现下图结果

使用hook方式的useContext 实现function 组件传递Context

contextTypePage.js

useContext只能使用在function组件内，本身是一个hooks方法，可以同时导入多个赋值

import React, { Component, useContext } from 'react'
import {ThemeContext, UserContext} from '../Context'


export default class ContextTypePage extends Component {
  static contextType = ThemeContext
  render() {
    // 定义Context
    const { themeColor } =  this.context;
    // 通过props父组件传递给子组件
    console.log("this", this)
    // 通过static拿到themeContext
    return (
      <div>
         <h3 className={themeColor}>ContextTypePage</h3>
         <Child />
      </div>
    )
  }
}

// 在创建function 的子组件 不能使用class组件里面的static方法
// 可以使用hook useContext来是实现传值
function Child () {
  // 通过useContext 获取themeContext
  const themeContext = useContext(ThemeContext)
  // 同时使用多个useContext
  const userContext = useContext(UserContext)
  console.log(userContext)
  const { themeColor } = themeContext
return <div className= {themeColor}>Child组件{userContext.name}</div>
}

context.Consumer

Context.consumer只能使用在class组件中 解决contextType一次只能赋值一次的问题

app.js

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'
import ConsumerPage from './pages/ConsumerPage'



function App() {
  return (
    <div className="App">
      <ContextPage />
      <ConsumerPage />
    </div>
  );
}

export default App;

ConsumerPage.js

// 使用consumer方法在class中使用多个赋值
import React, { Component } from 'react'
import {ThemeContext, UserContext} from '../Context'


export default class ConsumerPage extends Component {
  render() {
    return (
      <div>
        <h3>ConsumerPage</h3>
        {/* Consumer 内部需要用函数来解构 */}
        <ThemeContext.Consumer>
          { themeCtx=>
            <div className={themeCtx.themeColor}>
              {
                // 嵌套写UserContext.Consumer
                <UserContext.Consumer>
                  {
                    user =><div>{user.user}</div>
                  }
                </UserContext.Consumer>
              }
            </div>
          }
        </ThemeContext.Consumer>
      </div>
    )
  }
}

注意事项

1. 对象不能引入到Provider value 里面，源于react 内部比较context的是===全等但是两个相同对象是不相同 ，因此每一次都会渲染，因此把对象放入state中