使用Context
,能夠跨越組件進行數據傳遞react
import React from 'react'; import ReactDOM from 'react-dom'; const ThemeContext = React.createContext({ background: 'red', color: 'white' });
經過靜態方法React.createContext()
建立一個Context
對象,這個Context
對象包含兩個組件,<Provider />
和<Consumer />
。dom
class App extends React.Component { render () { return ( <ThemeContext.Provider value={{background: 'green', color: 'white'}}> <Header /> </ThemeContext.Provider> ); } }
<Provider />
的value
至關於如今的getChildContext()
。ide
class Header extends React.Component { render () { return ( <Title>Hello React Context API</Title> ); } } class Title extends React.Component { render () { return ( <ThemeContext.Consumer> {context => ( <h1 style={{background: context.background, color: context.color}}> {this.props.children} </h1> )} </ThemeContext.Consumer> ); } }
<Consumer />
的children
必須是一個函數,經過函數的參數獲取<Provider />
提供的Context
函數
參考自:https://www.jianshu.com/p/eba2b76b290bthis