Reactjs 如何使用setTimeout（）函数在一段时间后向组件发送新道具？

我有一个名为flash的组件，打算在DOM中只停留5秒钟（这是一条通知用户他已成功发送帖子的消息），我希望它在2秒钟后开始淡出，以便在从DOM中移除5秒钟后，它的可见性已设置为0。 为了实现这一点，在父组件中，I setTimeout（）并向flash组件发送一个包含布尔值设置为true的prop，其中它有一个if等待该布尔值，当它得到它时，它会为该组件分配一个新类，使其消失。这一切听起来都很完美，但不幸的是它根本不起作用。。。我尝试在flash组件中更新类，但它也不起作用。。。也许你能想出点什么？我敢肯定，在react中使用预先安排好的组件发送flash消息在react中是一件小事，但我想不出任何方法来做到这一点

父组件：

        if(this.state.flashMessage){
            flash = <Flash>{this.state.flashMessage}</Flash>
            setTimeout(() => {
                //here I send the component the prop 'close' after two seconds
                flash = <Flash close>{this.state.flashMessage}</Flash>
            }, 2000);
        }

        return ( 
            <React.Fragment>
                <div className={classes.postContainer}>
                    {posts}
                    <div className={classes.Card} onClick={this.showPostAdd}>
                        <img alt="add a post" src={addPostImage} />
                    </div>
                </div> 
                {addPostActive}
                {flash}                    
            </React.Fragment>               
        );```

Here is the flash component

``` const flash = (props) => {
    let classNames = [classes.Flash];

    if(props.close){
        classNames.push(classes.TestFlash);
    }
    
    return (
        <div className={classNames.join(' ')}>
            <p>{props.children}</p>
        </div>
    );
}

if（this.state.flashMessage）{
flash={this.state.flashMessage}
设置超时（（）=>{
//在这里，我在两秒钟后发送组件道具“关闭”
flash={this.state.flashMessage}
}, 2000);
}
报税表（
{posts}
{addPostActive}
{flash}
);```
这是flash组件
```常量闪光=（道具）=>{
让classNames=[classes.Flash]；
如果（道具关闭）{
push（classes.TestFlash）；
}
返回(
{props.children}

);
}

渲染仅在更新组件时运行，setTimeout不会触发该更新。但是，更改状态值会触发组件的更新

您应该做的是直接在render方法上打印Flash组件，并将close属性绑定到状态布尔值

<Flash close={this.state.closeFlashMessage}>{this.state.flashMessage}</Flash>

---

这不起作用，因为简单地设置

flash=…

不会触发重新渲染。您需要将该信息存储在组件的状态中，并在那里进行更新，以使其正常工作。我认为这样做是可行的：

{this.state.flashMessage && <Flash close={this.state.isFlashMessageClosed}>{this.state.flashMessage}</Flash>

---

希望这对您有用。

非常感谢！这对我很有效！非常感谢你！这对我很有效！

{this.state.flashMessage && <Flash close={this.state.isFlashMessageClosed}>{this.state.flashMessage}</Flash>

componentDidUpdate(prevProps, prevState) {
  if(prevState.flashMessage !== this.state.flashMessage) { 
    // If the flash message changed, update state to show the message
    this.setState({ isFlashMessageClosed: false });

    setTimeout(()=>{
      // Update state to close the message after 2 seconds
      this.setState({ isFlashMessageClosed: true });
    }, 2000);
  }
}