React 之React.createContext

述律發表於 2019-10-11 10:40:00

使用<code>Context</code>，可以跨越组件进行数据传递
 
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';

const ThemeContext = React.createContext({
background: 'red',
color: 'white'
});</pre>
</div>
 
通过静态方法<code>React.createContext()</code>创建一个<code>Context</code>对象，这个<code>Context</code>对象包含两个组件，<code><Provider /></code>和<code><Consumer /></code>。
 
<div class="cnblogs_code">
<pre>class App extends React.Component {
render () {
return (
 <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
 <Header />
 </ThemeContext.Provider>
 );
}
}</pre>
</div>
<code><Provider /></code>的<code>value</code>相当于现在的<code>getChildContext()</code>。
 
<div class="cnblogs_code">
<pre>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>
 );
}
}</pre>
</div>
<code><Consumer /></code>的<code>children</code>必须是一个函数，通过函数的参数获取<code><Provider /></code>提供的<code>Context</code>
 
参考自：https://www.jianshu.com/p/eba2b76b290b
 

</div>
<div id="MySignature" role="contentinfo">
此文仅为鄙人学习笔记之用，朋友你来了，如有不明白或者建议又或者想给我指点一二，请私信我。liuw_flexi@163.com/QQ群:582039935.

我的gitHub: (学习代码都在gitHub)
https://github.com/nwgdegitHub/ 
来源：https://www.cnblogs.com/liuw-flexi/p/11652688.html

頁: [1]

琼殿技术论坛's Archiver

React 之React.createContext