javascript - 如何在延迟后显示模态？

Question

我试图在页面加载后 2 秒加载模式。我尝试在 componentDidUpdate 上设置状态，但我不断获得 active: undefined active 属性决定了页面上模态的可见性。我尝试在 react 工具的浏览器上将其切换为 true，然后我的模式出现了。我只是不确定如何在页面加载后 2 秒加载它。

  state = { show: true };

  showModal = () => {
    this.setState({ show: true });
  };

  closeModal = () => {
    this.setState({ show: false });
  };

render() {
const { showModal } = this.state;

return (
  <React.Fragment>
    ....
    <Modal.ModalAnimator active={showModal} onClose={this.closeModal}>
      <Modal.ModalWithCross
        onClose={this.closeModal}
      >
        <h3>Are you interested in any other Additions?</h3>
        <Section>
          <p>Hit “notify concierge” and we’ll be in touch shortly.</p>
        </Section>

      </Modal.ModalWithCross>
    </Modal.ModalAnimator>
  </React.Fragment>
)
}

Answer 1

在解构状态时，您可以编写 showModal 而不是实际的状态字段名称 show。因此，render 函数中的第一行应为:

render() {
  const { show } = this.state;

  return (
    <React.Fragment>
      ...
      <Modal.ModalAnimator active={show} onClose={this.closeModal}>
        ...