react之context

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就可以在控制台看见传递下来的数据了