子组件请求，父组件展示loading

子组件请求，父组件展示loading

场景：子组件请求各自的数据，需要父亲组件loading，等最后一个组件请求完毕后再取消loading（为了让loading只显示一个，视觉上好看）

解决：当时想当然了，一直采用一个变量控制展示不展示loading组件，因此没有找到合适的方案。后来一下子搞明白，可以让loading变成一个类似于蒙层的这种方式盖到上边，当最后一个子组件加载完毕后再将蒙层隐藏。代码如下

const SetLoading = () :JSX.Element =>{
  const [loadingNum,setLoadingNum] = useState(0)
  const handleLoading = () => {
    setLoadingNum(num => num+1)
  }
  return (
    <div>
      <Loading loading={loadingNum!==3}></Loading>
      <A onLoading={handleLoading}/>
      <B onLoading={handleLoading}/>
      <C onLoading={handleLoading}/>
    </div>
  )
}

const Loading = (props:any) => {
  const {loading} = props
  let styleLoad = {}

  if(loading) {