React入门之Context-API的使用案例

);

}

export default App;

这样我们就能在Navbar和SongList里使用共享的数据了

获取数据的方式有两种，一种是通过contextType获取，另一种是通过consumer获取

---

使用contextType获得数据

---

Navbar.js

import React, { Component } from ‘react’

import { ThemeContext } from ‘…/contexts/ThemeContext’;

class Navbar extends Component {

static contextType = ThemeContext; // 使用contextType获取共享的数据

render() {

const { isLightTheme, light, dark } = this.context; // 解构变量

const theme = isLightTheme ? light : dark; // 当isLightTheme为true时，用浅色主题

// 返回带有主题样式的JSX模板内容

return (

Context App

• Home
• About
• Contact

• )

  }

  }

  export default Navbar;

  效果：浅色主题的导航栏

  ---

  

  ---

  import React, {Component} from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class SongList extends Component {

  static contextType = ThemeContext;

  render(){

  const { isLightTheme, light, dark } = this.context;

  const theme = isLightTheme ? light : dark;

  return (
• 大鱼
• 幽灵公主
• 望

• )

  }

  }

  export default SongList;

  效果：浅色主题的导航栏和主体部分

  ---

  

  ---

  使用consumer获取共享数据

  ---

  Navbar.js

  import React, { Component } from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class Navbar extends Component {

  render() {

  // 调用Consumer方法，其child只能有一个，且为function

  return (

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark } = context;

  const theme = isLightTheme ? light : dark;

  return (

  Context App
• Home
• About
• Contact

• )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  export default Navbar;

  SongList.js

  import React, { Component } from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  class SongList extends Component {

  render() {

  return (

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark } = context;

  const theme = isLightTheme ? light : dark;

  return (

  )

  }

  }

  </ThemeContext.Consumer>

  )

  }

  }

  export default SongList;

  效果同上

  ---

  更新共享数据

  ---

  • 数据是存储在ThemeContext里的，props也可以传递函数，

  • 因此，我们可以在ThemeContext里定义更新数据的函数，并传递给消费组件，

  • 消费组件返回要更新的信号，ThemeContext就开始更新

  // 更换主题

  toggleTheme = () => {

  this.setState({

  isLightTheme: !this.state.isLightTheme

  })

  }

  // 在原来传递state数据的基础上，加上更换主题的函数

  render() {

  return (

  <ThemeContext.Provider value={{ …this.state, toggleTheme: this.toggleTheme }}>

  {this.props.children}

  </ThemeContext.Provider>

  )

  }

  SongList组件接收该函数并给出回应

  增加一个”切换主题“的按钮，点击一下就调用toggleTheme，切换主题样式

  <ThemeContext.Consumer>

  {

  (context) => {

  const { isLightTheme, light, dark, toggleTheme } = context; // 添加“切换主题”函数的解构

  const theme = isLightTheme ? light : dark;

  return (

  切换主题

  {/* 点击按钮时触发toggleTheme函数 */}

  )

  }

  }

  </ThemeContext.Consumer>

  效果：

  

  ---

  创建多个context

  ---

  首先是创建新的context，功能比较简单，就是打招呼，hello~

  • 定义了一个布尔变量isAGirl，默认为true

  • 定义一个问候语的切换函数toggleGreeting

  • 把state和函数都传递给消费组件

  import React, { Component, createContext } from ‘react’;

  export const GreetingContext = createContext();

  class GreetingContextProvider extends Component {

  state = {

  isAGirl: true

  }

  // 更换问候语

  toggleGreeting = () => {

  this.setState({