使用react context的作用React.createContext

春冰發表於 2020-5-14 14:13:00

使用react context的作用React.createContext

前言：在实际开发项目的时候我们可能会经常碰到多层组件传值的情况，就是父组件的值传递给子组件。子组件再传递给下面的子组件，再传递给下面的子组件.......可能会遇到这个情况。
然而这个值，可能会只在最后的子组件使用到，那么这个时候使用createContext简直就是无敌的存在。
超级简单又方便，因为最进重构一个项目遇到了多级地狱般的this.props传值，搞得头疼。所以推荐多级使用context。
 
 
 
 使用方式，需要在父组件上面创建一个context，或者建立一个文件用来管理context。
//createContext.jsx 文件
<div class="cnblogs_code">
<pre>export const ButtonContext = React.createContext(‘这里是默认值懂吗');</pre>
</div>
//父组件使用
父组件通过Provider包裹子组件，通过value={ }携带参数。这个Provider可以理解为生产者。
<div class="cnblogs_code">
<pre>import { ButtonContext } from './createContext'; //引入 </pre>
<pre>import React, { Component } from 'react'; class Father extends Component { state:{</pre>
<pre>choseType:'我是要传的值'</pre>
<pre>} render() { return ( <div></pre>
<pre>　　　　<ButtonContext.Provider value={this.state.choseType}>
　　　　 {this.props.children}
　　　　</ButtonContext.Provider></pre>
<pre> </div> ); } } export default Father;</pre>
</div>
 
//children.jsx       //他的子组件或者是子子子子子....组件（只要是在父组件下面的组件就可以）子组件使用Consumer包裹，打印出来的value就是接收到的参数。
<div class="cnblogs_code">
<pre>import { ButtonContext } from './createContext'; //引入


import React, { Component } from 'react';

class Children extends Component {


render() {
return (
 <div></pre>
<pre> 　　 <ButtonContext.Consumer> 　　　　 {value=>console.log("context",value)} //这里打印下看这个value，记得使用时候要return 　　　　</ButtonContext.Consumer></pre>
<pre></div> ); } } export default Children;</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
不要说我不会，要说我可以学 
来源：https://www.cnblogs.com/seemoon/p/12888318.html

頁: [1]

琼殿技术论坛's Archiver

使用react context的作用React.createContext