当antd组件不满足需求，需要改造时

最近 有个操作被难住了，难住了然后就不会往前走了

状态如下

从微博上存下来的 忘了是谁画的了，哈哈哈。

困境 就是 有了第一步不会 第二步就没办法执行下去

今天终于实现辣 

问题是antd的spin组件 tip只能传string， 如何 改造spin tip组件 使其也可以传组件

改造spin tip组件 使其也可以传组件

先看官网

改造版本

改造代码为

import React, { useRef, useEffect } from 'react';
import { Spin, Alert } from 'antd';import ReactDOM from 'react-dom';
/*** 加载组件* */
function SpinTip() {  
  return (    
    <div>    
       正在加载中，<span style={{color: 'red'}}>点击取消</span>    
    </div>  
  )
};
/*** spin 加载中*/
const SpinTest: React.FC<{}> = () => {  
  const spinDom = useRef(null); 
  useEffect(() => {    
    console.log(spinDom, 'spinDom');    
    const tipDom = document.getElementsByClassName('spin-wrapper')[0].getElementsByClassName('ant-spin-text')[0];     
    ReactDOM.render(<SpinTip />, tipDom)  
  }, [])  
  return (   
    <Spin 
       wrapperClassName='spin-wrapper'     
       ref={spinDom}     
       tip="Loading..."   
    >    
       <Alert      
          message="Alert message title"      
          description="Further details about the context of this alert."     
          type="info"      
       />  
    </Spin>  
  )
}

export default SpinTest;

该方法仅仅是实现了 组件tip功能  后续有更好方法会继续分享