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

Question

我有一个名为 flash 的组件，它只在 DOM 中显示 5 秒（这是一条消息，通知用户他已发送 post 成功）并且我希望它在 2 秒后开始消失，这样当它从 DOM 中移除时 5 秒后它的可见性已经设置为 0。为此，我在父组件中设置了 setTimeout() 并将包含布尔值设置为 true 的道具发送到 flash 组件，其中它有一个 if 等待该布尔值以及何时获取它，它为该组件分配一个新的 class 以使其消失。这一切听起来很完美，但不幸的是它根本不起作用......我尝试更新 flash 组件中的 class 但它也不起作用......也许你能想出点什么？我确信在 React 中发送 flash 消息以响应预先安排的组件是一件小事，但我想不出任何方法！

父组件：

        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>
    );
}

Answer 1

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

你应该做的是直接在render方法上打印Flash组件并绑定close 状态布尔值。

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

然后我将超时函数放在 componentDidMount() 方法上。

componentDidMount() {
    this.mounted = true;

    setTimeout(() => {
        //check the mounted state in case the component is disposed before the timeout.
        if(this.mounted) {
            //here I send the component the prop 'close' after two seconds
            this.setState({ closeFlashMessage: true });
        }                
    }, 2000);
}

//add this method to prevent any state management during the component's disposal
componentWillUnmount() {
    this.mounted = false;
}

Answer 2

这不起作用，因为简单地设置 flash = ... 不会触发重新渲染。您需要将该信息存储在组件的状态中并在那里进行更新，以使其正常工作。我认为这样的事情会奏效：

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

我也不建议直接在渲染方法中设置超时。这应该是状态变化触发的副作用，所以我建议将它放在 componentDidUpdate 中，如下所示：

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);
  }
}

希望对你有用。

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

How can I send a new prop to a component after time using the setTimeout() function?

settimeout

flash-message

reactjs