react --- 无关联组件共享状态 useContext()

最新推荐文章于 2024-06-21 15:55:59 发布

阿里今天不上班

最新推荐文章于 2024-06-21 15:55:59 发布

阅读量187

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52905182/article/details/137506133

版权

event.js

import React, {useState} from 'react';
import AlertBox from '../page/Com1/index';
import Detail from '../page/Com2/index'

export const ValueContext = React.createContext({})

const Events = () => {
    const [values, setValues] = useState([]); 
   
    return (
        <ValueContext.Provider value={{ values }}>
            <Com1 /> 
            <Com2/> 
        </ValueContext.Provider>
    );
};

export default Events

Com1.js 发送数据

import React, {useContext } from "react"
import {ValueContext} from '../../utils/events'

const Com1= ({}) => {
    const value = useContext(ValueContext)
    const handleMessages = (message) => {
        if(message !== 'null'){
            let parseString = JSON.parse(message)
			value.values = parseString.alarmCounts
        }
    }
    return (
        <>
          {value.values}
        </>
    )
}

export default Com1;

Com2.js 接受数据

import React, { useEffect, useState,useRef,useContext   } from "react";
import { Row, Col,Card,Spin,Badge } from "antd";
import {ValueContext} from '../../utils/events'
const RobotDetail = ({}) => {
    const value = useContext(ValueContext);
    // console.log(value)
   
    return (
        <Spin>
       		<div style={{margin: 8}}>
           		<Row>
				 <Card
                        title="报警显示"
                        size="small"
                    >
                           {JSON.stringify(value) !== '{}' ? value.values.map((item,index) => {
                                return (
                                    <Row style={{marginTop: 12,marginLeft: 30}} key={index}>
                                        <Badge count={item.count}  offset={[18, 2]}>                              
                                              {item.alarmName}
                                        </Badge>
                                    </Row>   
                                ) 
                            }):''
                        }    
                    </Card>
           		</Row>
       		</div>

        </Spin>
        
    )
}

export default Com2;