react之context-IT·Ren

context是什么

Props属性是由上到下单向传递的

context提供了在组件中共享此类值的方法

context使用

设计目的是共享哪些对于组件来说全局的数据

不要因为仅仅为了避免在几个层级下的组件传递props而使用context

context用法

1.先创建一个theme-context.js

 import React from 'react'

 const ThemeContext = React.createContext()

 export default ThemeContext

2.在组件app.js里面引用

 import React, { Component } from 'react';
 import './App.css';
 import ThemeContext from './theme-context'
 import ThemeBar from './components/ThemeBar'
 const themes = {
     light: {
         className: 'btn btn-prime',
         bgColor: '#f00',
         color: '#fff'
     },
     dark: {
         className: 'btn btn-dark',
         bgColor: '#ff0',
         color: '#000'
     }
 }

 class App extends Component {
     render() {
         return (
             <ThemeContext.Provider value={themes.light}>
             <div>
                 <ThemeBar/>
             </div>
             </ThemeContext.Provider>
         );
     }
 }

 export default App;

3.创建ThemeBar组件

 import React from 'react'
 import ThemeContext from '../theme-context'

 const ThemeBar = () => {
     return (
         <ThemeContext.Consumer>
         {
             theme => {
                 console.log(theme)
             }
         }
         </ThemeContext.Consumer>
     )
 }

 export default ThemeBar

在组件里面打印传递下来的theme就可以在控制台看见传递下来的数据了

react之context

相关文章