React 之React.createContext

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

使用Context，可以跨越组件进行数据传递

import React from 'react';
import ReactDOM from 'react-dom';const ThemeContext = React.createContext({
background: 'red',
color: 'white'
});

通过静态方法React.createContext()创建一个Context对象，这个Context对象包含两个组件，<Provider />和<Consumer />。

class App extends React.Component {
render () {
return (
<ThemeContext.Provider value={{background: 'green', color: 'white'}}>
<Header />
</ThemeContext.Provider>
);
}
}

<Provider />的value相当于现在的getChildContext()。

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>
);
}
}