hooks 与context 配合使用

context.js 文件

import React, { useState, useEffect } from 'react';
import { getUserInfo } from './services/app';

const FrameContext = React.createContext({
    userInfo: ''
});

function frameHook() {
    const [userInfo, setUserInfo] = useState();

    useEffect(() => {
        getUserData();
    }, []);

    const getUserData = () => {
        getUserInfo().then(res => {
            setUserInfo(res);
        });
    };

    return {
        userInfo
    };
}

export { FrameContext, frameHook };

父组件 app.js

import styles from './app.less';
import React from 'react';
import { BrowserRouter, Redirect, Switch } from 'react-router-dom';
// import PropTypes from 'prop-types';
import { message, ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';

// 公共组件样式
import 'y900-components/dist/y900-components.css';

import AuthRoute from '@/components/authRoute/AuthRoute';

// 加载布局组件
import Header from './header/Header';
import Footer from './footer/Footer';
import LeftMenu from './leftMenu/LeftMenu';

import routers from './routers';
import { FrameContext, frameHook } from './context';

export default function App() {
    // moment本地化
    moment.locale('zh-cn');

    // 消息统一配置
    message.config({
        top: 100,
        duration: 2,
        maxCount: 1
    });

    return (
        <ConfigProvider locale={zhCN}>
            <FrameContext.Provider value={frameHook()}>
                <BrowserRouter>
                    <div className={styles.mainLayout}>
                        <Header />
                        <div className={styles.content}>
                            {/* 左侧菜单 */}
                            <LeftMenu />
                            {/* 内容 */}
                            <div className={styles.rightMain}>
                                <Switch>
                                    <Redirect exact={true} from="/" to={routers[0].path} />
                                    {routers && routers.map(item => {
                                        let { path, ...rest } = item;

                                        return (
                                            <AuthRoute
                                                key={item.name}
                                                {...rest}
                                                parents={[item]}
                                                routers={routers}
                                                path={path}
                                            />
                                        );
                                    })}
                                </Switch>
                            </div>
                        </div>
                        <Footer />
                    </div>
                </BrowserRouter>
            </FrameContext.Provider>
        </ConfigProvider>
    );
}

App.propTypes = {
    // 
};

子组件

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { MainTitle, Button, Modal, Enums } from 'y900-components';
import { getSession }  from '@/utils/storage';
import styles from './view.less';
import Cns from 'classnames';
import { isNotEmpty } from '@/utils/common.js';
import { info } from '../edit/service';
import { FrameContext, frameHook } from  '@/layouts/app/context.js';
const API = Enums.API.SUPPORT_SERVICE;
export default function Management({
    // parents,
    parentPath
}) {
    let data = getSession('messagesView'); 
    const history = useHistory();
    
    return (
        <FrameContext.Consumer >
            {
                ( { userInfo: { username } }) => 
                    <div>
                        <div className="backBtn"  ><Button   name="返回" img="back" onClick={() => {history.goBack();}}   /></div>
                        <div className={Cns('main-container')}>
                            <MainTitle  name={'预览'} />
                            <div className={Cns(styles.messageView)}>
                                <p className={styles.title}>{data.title}</p> 
                                <p className={styles.souTi}><span>来源: {username}</span><span className={styles.jiange}></span><span>时间: {data.time}</span></p>
                                <div  className={styles.inner} dangerouslySetInnerHTML={{ __html: data.text }}></div>
                                <div className={styles.lianjie}>
                                    {
                                        data.fileList.map(
                                            p => <a  key={p.id} href={p.fileUrl} > {p.name}</a>
                                        )
                                    }
                            
                                </div>
                            </div>
                
                        </div>
                    </div>
            }
        </FrameContext.Consumer>
    );
}

Management.propTypes = {
    parentPath: PropTypes.string
    // parents: PropTypes.array
};