React 功能组件 - 如何从内部删除组件？

Question

我有一个基于用户操作显示的警报组件：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;}它是这样使用的：setResponseAlert(<Alert     text="Please check the field errors and try again."     type="danger" stick={false} hideable={false}/>)问题是实例化 Alert 组件仍然返回旧组件。Alert 组件消失后如何实现移除？

Answer 1

向下传递，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>

    );

}