javascript - 使用 React，如何在一定时间后从 DOM 中删除组件之前添加组件？

Question

事件发生后，我想将 DOM 元素添加到指定位置并显示指定消息，然后在指定时间后，我希望将其从 DOM 中删除。我如何使用 React 来实现这一目标？我目前正在使用 jQuery 进行此操作，但想在 React 中重写此功能。

function prependMessage(prependToElementSelector, message, timeout) {
  $(prependToElement).prepend('<div id="search-confirmation-message"><p>' + message + '</p></div>');

  setTimeout(function() {
    $('#search-confirmation-message').remove()
  }, timeout);
}

// Run this method whenever an event occurs
prependMessage('#search-panel-container', 'Your filters have been updated.', 2500);

Answer 1

您可以创建一个显示消息的组件，并在经过一定时间后自行卸载。

import React, { Component } from 'react';

class TimedMessage extends Component {
    constructor(props) {
        super(props);
        this.state ={show:true}

    }
    componentDidMount() {
        setTimeout(this.setState({show:false}, this.props.timeout));
    }

    render() {
        let element =this.state.show?<div id="search-confirmation-message"><p>' +{this.props.message} + '</p></div>:null;
        return element;
    }
}

export default TimedMessage;

无论哪个组件处理该事件都应该能够在事件发生时显示该组件，使用在状态中设置标志的事件处理程序

onSomethingHappened= ()=>{
this.setState({showMessage:true})}

并检查标志并在渲染方法中渲染组件

render(){
...

    return(
    ...

    {this.state.showMessage?<TimedMessage message={"This is my timed message"} timeout={5000} />:null}

    ...
    );

}

评论后编辑:组件代码:

import React, { Component } from "react";

class TimedMessage extends Component {
  constructor(props) {
    super(props);
    this.state = { show: true };
  }
  startTimer=()=>{
    this.setState({ show: true });
    setTimeout(() => this.setState({ show: false }), this.props.timeout);
  }
  componentDidMount() {

    this.startTimer();
  }
  componentWillReceiveProps() { this.startTimer();}
  render() {
    let element = this.state.show ? (
      <div>
        <p>{this.props.message} </p>
      </div>
    ) : null;

    return element;
  }
}

export default TimedMessage;

沙盒:https://codesandbox.io/s/1474451lk4