React中使用Context跨组件传输（父传子)

1.当组件层集比较深的时候，我们可以使用context进行跨组件传输数据。

2.利用axios请求进行数据传输

主要文件目录如下：

 

index.js代码如下：

import ReactDOM from "react-dom/client";
import App from "./App";

let root =ReactDOM.createRoot(document.getElementById('root'))
root.render()

App.js部分代码

import React, { Component } from "react"
import './App.css'
import ComA from "./component/ComA"

class App extends Component {

    render() {
        return (
           

           
           
        )
    }
}

export default App

App.css样式

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
body{
    background: rgb(235, 235, 235);
}
.app{
    width: 400px;
    margin: 50px auto;
    background: #ddd;
}
.coma{
    padding: 20px;
    background: aqua;
}
.comb{
    padding: 20px;
    background: rgb(158, 42, 252);
}
.comc{
    padding: 20px;
    background: rgb(56, 252, 42);
}

http.js部分代码

import axios from "axios";
// 给axios请求头统一封装
const http= axios.create({
    baseURL:'https://api.shop.eduwork.cn/'
})

export default http

TestContext.js部分代码

import React from "react";
// 调用React中context方法
const TestContext = React.createContext({})
// 暴漏出去
export default TestContext

ComA.jsx部分代码

import React, { Component } from 'react'
import ComB from './ComB'
// 导入axios请求封装的函数
import http from '../utils/http'
// 引入context方法
import TestContext from '../store/TestContext'
export default class ComA extends Component {

    state={
        goods:{}
    }
    // Ref方法
    good=React.createRef()
    // 点击事件
    getGoodsID = () => {
        // 接收输入框id
        let good=this.good.current.value
        this.good.current.select()
        // axios请求调用传参
        this.getData(good)
        
    }
    componentDidMount(){
        // 初始化数据显示
        this.getData(1)
    }
    // axios请求封装
    getData=(good)=>{
        const url = `/api/goods/${good}`;
        http.get(url).then(res => {
            console.log(res);
            // 改变state的属性值
            this.setState({
                goods:res.data.goods
            })
        }).catch(err => {
            console.log(err);
        })
    }
    render() {
        // state属性值解构
        let {goods}=this.state
        console.log(goods);
        return (
            

                

                    
                
                {/* 利用context自带的包裹并携带数据 */}
                
                    
                 
            
        )
    }
}

ComB.jsx部分代码

import React, { Component } from 'react'
import ComC from './ComC'

export default class ComB extends Component {
  render() {
    return (
      

        
      
    )
  }
}

ComC.jsx部分代码

import React, { Component } from 'react'
// 导入context方法
import TestContext from '../store/TestContext'

export default class ComC extends Component {
    render() {
        return (
            

                {/* 使用接收父组件传入数据利用回调函数{v=>{v.属性名}} */}
                
                    {v => 

                        
商品ID为：{v.id}
                        
商品名称为：{v.title}
                        图片：
                    

                    }
                
            
        )
    }
}