Переход Fade не работает на компоненте React Bootstrap Alert - PullRequest
Новая
       3

Переход Fade не работает на компоненте React Bootstrap Alert

0 голосов
/ 27 февраля 2020

У меня есть предупреждение, которое я отображаю каждый раз, когда загружаю страницу, и пользователь может закрыть предупреждение, когда захочет.

Теперь я хочу добавить закрывающий переход к предупреждению, но это не так кажется, работает.

Я пробовал много вещей, но все еще не влиял на мое предупреждение.

Вот мой код: 

function ReactTip(props){
    if(props.display){
        return(
            <Bs.Fade in={props.display}>
                <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
                </div>
            </Bs.Fade>
        );
    }
    return null;
}

Обратите внимание, что значение props.display верно. Что не так с моим кодом?

Обновление # 1: я пробовал это, и переход работает, но div все еще там, как будто дисплей CSS скрыт, а не none. 

return(
       <Bs.Fade in={props.display}>
           <div>
                <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
                    <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
                </Bs.Alert>
           </div>
       </Bs.Fade>
);

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Используйте переход prop transition={Fade}.

0 голосов
/ 27 февраля 2020

Я не могу найти способ заставить <Fade /> работать, поэтому я просто использовал <Collapse />

Вот мой обновленный код: 

<Bs.Collapse in={props.display}>
    <div>
         <Bs.Alert variant={props.variant} onClose={props.onClose} dismissible>
            <FaLightbulb /> Tip: For multiple inputs, you can press tab while inside a text box to automatically add a new row.
         </Bs.Alert>
    </div>
</Bs.Collapse>
...