Question

我在React中创建了一个简单的消息组件。这是核心代码：

import React, { useState, useEffect } from 'react';
import Fade from 'react-bootstrap/Fade'

const styleSheet = () => ({
  container: {
    position: 'absolute',
    top: '80px',
    right: '10px',
    zIndex: 1,
    width: '400px',
    height: '50px',
    border: '1px solid #595959',
    boxShadow: '2px 2px #454545',
    backgroundColor: '#f8f8f8',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const SystemMessage = (props) => {
  const { classes } = props;
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setOpen(!open);

    setTimeout(function() {
      setOpen(!open);
    }, 3000);
  }, []);

  return (
    <Fade in={open}>
      <div className={classes.container}>
        <div>
          Here is a sample message
        </div>
      </div>
    </Fade>
  );
}

const styledComponent = injectSheet(styleSheet)(SystemMessage);

export default styledComponent;

该组件确实出现，但是3秒钟后它不会消失。我按照此处显示的说明进行操作：https://react-bootstrap.github.io/utilities/transitions/

有什么想法我在做什么错吗？

无法使<Fade>与React Bootstrap一起使用

0 个答案: