外部js调用组件内的方法

比如我有一个模态框组件，这个组件在可以在请求时显示 “正在请求数据” 之类的提示，并且请求结束时关闭。
很显然要在其内部设置 state 控制显示与否
比如我设置了一个 axios 拦截器，这个拦截器需要在请求拦截器里面调用该模态框组件的方法，使其设置为显示状态，
并且在响应拦截器里面调用该模态框组件的方法，使其设置为不显示

第一种情况：class 组件
方法1（用ref调用组件的方法）：组件内声明一个方法（比如叫做 toggle ），控制显示状态，同时需要一个 ref 引用该组件，
从而外部 js 可以通过 ref.current.toggle(显示状态)来控制模态框里面的 state
示例：

// 放置组件的地方
<Loading ref={LoadingRef}></Loading>
// 调用组件方法的地方
LoadingRef.current.update_show(true)

方法2（在生命周期函数将控制 state 的方法暴露）：

class Loading extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: false
        }
    }

    componentDidMount() {
        document.body.appendChild(container)

        loading_handler = this.update_show
    }

    update_show = (show) => {
        this.setState({
            show,
        })
    }

    render() {
        const { show } = this.state
        return show ? ReactDOM.createPortal(<div id='loading_wrapper'>
            <div id='loading_content'>数据正在加载中...</div>
        </div>, container) : null
    }
}

第二种情况：函数式组件
方法（跟上面的方法2一样）：这个时候用 ref 和 React.createRef 是行不通的，只能用 useEffect 里面设置将控制 state 的函数赋值给外面的一个变量，然后导出该变量，
需要调用该方法的地方导入即可使用
示例：

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import  './loading.css'

const container = document.createElement('div')
let loadingHook = null

const Loading = props => {

    useEffect(() => {
        document.body.appendChild(container)
    })

    const [show, setShow] =  useState(false)

    useEffect(() => {
        console.log('setting loading hook')
        loadingHook = setShow
    }, [setShow])
        
    return show ? ReactDOM.createPortal(<div id='loading_wrapper'>
        <div id='loading_content'>数据正在加载中...</div>
    </div>, container) : null
    

}

export default Loading

export {
    loadingHook
}