Не могу заставить <Fade>работать с React Bootstrap - PullRequest
Новая
       81

Не могу заставить <Fade>работать с React Bootstrap

0 голосов
/ 09 октября 2019

Я создал простой компонент сообщения в 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 / утилиты / переходы /

Есть идеи, что я делаю неправильно?

...