Recently an operation got stuck, got stuck and couldn’t move forward
State the following
I can’t remember who drew it from my Weibo. Hahaha.
The dilemma is that if you can’t do the first step, you can’t do the second step
Today finally realized spicy
The spin tip component of ANTD can only pass strings. How to modify the Spin Tip component to also pass components
Modify the Spin Tip component so that it can also pass components
Look at the website
Modified version
Modified code
import React, { useRef, useEffect } from ‘react’;
import { Spin, Alert } from ‘antd’;
import ReactDOM from ‘react-dom’;
/ * *
* Load components
* * /
function SpinTip() {
return (
<span style={{color: ‘red’}}
)
};
/ * *
* Spin is loading
* /
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(
.
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”
/>
)
}
export default SpinTest;
This method just implements the component tip function and there will be better methods to share later