Javascript 反应功能组件-如何从内部删除组件？

我有一个基于用户操作显示的警报组件：

export default function Alert({text, type, hideable = true, stick = true}) {
    const [hide, setHide] = useState(false);
    const [id, setId] = useState(makeId(5));
    const alertEl = (
        <div key={id} id={id} className={"fade alert alert-" + type} role="alert">
            {hideable
                ? <span className="icon-close close" onClick={e => fadeOut()}> </span>
                : ''
            }
            {text}
        </div>
    );

    function fadeOut() {
        document.getElementById(id).classList.add('fade-out');
        window.setTimeout(() => {
            setHide(true);
        }, 500)
    }

    useEffect(() => {
        if (!stick) {
            window.setTimeout(() => fadeOut(), 3000);
        }
    }, [])

    if (hide) return '';
    return alertEl;
}

导出默认函数警报（{text，type，hidable=true，stick=true}）{
const[hide，setHide]=useState（false）；
const[id，setId]=useState（makeId（5））；
常数警报=(
{可隐藏
？衰减（）}>
: ''
}
{text}
);
函数衰减（）{
document.getElementById（id）.classList.add（'fade-out'）；
window.setTimeout（（）=>{
setHide（真）；
}, 500)
}
useffect（（）=>{
如果（！棒）{
setTimeout（（）=>fadeOut（），3000）；
}
}, [])
如果（隐藏）返回“”；
返回警报；
}

它是这样使用的：

setResponseAlert(<Alert 
    text="Please check the field errors and try again." 
    type="danger" stick={false} hideable={false}
/>)

setResponseAlert（）

---

问题是，实例化警报组件仍然返回旧组件。警报组件消失后，我如何执行删除操作？

传递

setResponseAlert

，以便可以使用

null

或

undefined

调用它，而不是使用

hide

状态

另外，不要使用

getElementById

，因为这是React，所以您应该以某种方式将fade类置于以下状态：

export default function Alert({text, type, setResponseAlert, hideable = true, stick = true}) {
    const [className, setClassName] = useState("fade alert alert-" + type);

    function fadeOut() {
        setClassName(className + ' fade-out');
        window.setTimeout(() => {
            setResponseAlert(null);
        }, 500)
    }

    useEffect(() => {
        if (!stick) {
            window.setTimeout(fadeOut, 3000);
        }
    }, [])
    return (
        <div role="alert" className={className}>
            {hideable
                ? <span className="icon-close close" onClick={e => fadeOut()}> </span>
                : ''
            }
            {text}
        </div>
    );
}

导出默认函数警报（{text，type，setResponseAlert，hiddeable=true，stick=true}）{
const[className，setClassName]=useState（“淡入淡出警报-”+类型）；
函数衰减（）{
setClassName（className+‘淡出’）；
window.setTimeout（（）=>{
setResponseAlert（null）；
}, 500)
}
useffect（（）=>{
如果（！棒）{
设置超时（衰减，3000）；
}
}, [])
返回(
{可隐藏
？衰减（）}>
: ''
}
{text}
);
}

很好的解决方案，谢谢。有趣的是，为什么react不仅仅是实例化一个新组件，即使我给了它一个键。我猜vDOM周期将通过忽略该组件来处理它，因为更改实际上并没有修改DOM。