react中的createContext使用方式
简介一下,就是组件之间可以互相通信的比较好用的传值方式,话不多说直接上代码。
以下介绍的是类组件中的方式,在函数组件中不是如此使用的。
定义一个通用的方法
javascript
import { createContext } from "react";
const Context = createContext();
// Content有两个属性
// 1. Provider 数据提供者
// 2. Consumer 数据使用者
const { Provider, Consumer } = Context;
export {
Provider,
Consumer
}
现在是数据提供者的页面代码
javascript
const data = {
name: 'John Doe',
age: 30,
hobbies: ['reading', 'painting', 'traveling']
}
root.render(
<React.StrictMode>
<Provider value={data}>
<App />
</Provider>
</React.StrictMode>
);
就是把这个data传过去了,不论是子代组件还是孙子组件都可以使用这个传参方法,如果组件套的层级太深了的话,要一层一层传不方便,但是用这个方式就简单很多。
儿子组件使用方式(代码片段)
javascript
import React from 'react';
import { Consumer } from './context/index'
import LearnFunction04 from './LearnFunction04'; // useEffect第二个参数的用法
export default function boxReact() {
return (
<div>
<Consumer>
{
(data) => {
console.log(data);
return <div>{data.name}</div>
}
}
</Consumer>
</div>
)
}
孙子组件使用方式
javascript
import React, { Component } from 'react'
import {Consumer} from './context/index'
export default class LearnFunction04 extends Component {
render() {
return (
<Consumer>
{
(data) => {
return <div>{data.name}</div>
}
}
</Consumer>
)
}
}
后代所有组件的方式都是如同孙子组件的使用方式