0

Столкнулся с такой проблемой. У меня есть компонент Tooltip, его можно вызвать в двух местах. Объясните пожалуйста что нужно сделать если компонент отрендерен из в одном месте, и после этого этот же компонент рендерится в другом месте , как сделать так что бы предыдущий уничтожался

`function Tooltip({ className, children, button, onClose, overlayColor }) {
    return (
        <>
            <div className={cn(styles.Root, className)} ref={TooltipEl}>
                <div className={cn(styles.Root__content)}>{children}</div>

                {button && (
                    <Button
                        {...button}
                        className={cn(styles.Root__button, button.className)}
                        width="full"
                        autoFocus
                    />
                )}
            </div>

            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
            <div
                className={cn(styles.Overlay, {
                    [styles[`Overlay_${overlayColor}`]]: overlayColor,
                })}
                onMouseDown={onClose}
            />
        </>
    );
}`
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Этот компонент я использую в двух других обёрточных компонентах

`function firstExample({ className }) {
return (
    <Tooltip className={cn(styles.Root, className)}>
                    bla bla bla what
    </Tooltip>
);
}`

`function SecondExample({ className }) {
return (
    <Tooltip className={cn(styles.Root, className)}>
                    bla bla bla what
    </Tooltip>
);
}`

Рендерятся firstExample и secondExample по клику на кнопке у других внешних компонентах

`function ParentComponentFirst({ className }) {
const [isShowing, setIsShowing] = useState(false);

const toggleDropDown = useCallback(() => {
    setIsShowing(!isShowing);
}, [isShowing]);

return (
    <div className={cn(styles.Root, className)}>
        <Button onClick={toggleDropDown} >
        </Button>

        {isShowing && <firstExample />}
    </div>
);
}`

`function ParentComponentSecond({ className }) {
const [isShowing, setIsShowing] = useState(false);

const toggleDropDown = useCallback(() => {
    setIsShowing(!isShowing);
}, [isShowing]);

return (
    <div className={cn(styles.Root, className)}>
        <Button onClick={toggleDropDown} >
        </Button>

        {isShowing && <secondExample />}
    </div>
);
}`

Так вот, я никак не могу понять что нужно сделать для того что бы когда один Tooltip отрендерился, после того когда кликаешь по кнопке которая рендерит второй Tooltip то первый бы уничтожался

Заранее спасибо

2 ответа 2

0

Первое что приходит в голову - это на уровень выше родительских компонентов в стейте хранить идентификатор ParentComponent, в котором в данный момент открыт тултип.

3
  • Спасибо за совет! А такое решение с точки зрения архитектуры и паттернов Reactа красивое?
    – Ivan
    9 сен 2020 в 18:17
  • @Ivan по сути это тоже самое что и глобальный стейт, так что в целом ок. Можно еще сделать это через контекст или через реальный глобальный стейт (redux например). Я же предложил самый простой и понятный вариант решения
    – Prvz
    10 сен 2020 в 9:34
  • 1
    Спасибо большое! Я сделал немного по другому, описал всю логику в родительских компонентах и прокинул колбэки в тултипы!
    – Ivan
    15 сен 2020 в 15:55
0

Проблема мне кажется не в повторности Tooltip ,а в отсутствии соответствующих state -ов у ParentComponentSecond и ParentComponentFirst. Или у firstExample с SecondExample.То есть когда события условно происходит в ParentComponentFirst то у ParentComponentSecond state меняется и становиться такой после которого Tooltip не отражается.

То есть должно быть некое if(state) выводить не выводить Tooltip. И тогда когда кликают по одному компоненту, state меняется и другой компонент перерисовывается с другим state в котором после прохода if Tooltip не отобразиться.

Другими словами отображение или не отображение любого компонента регулируется через какой-то state.Это философия react все состояния компонентов хранятся в state.

1
  • Спасибо большое за совет! Просто мне кажется использовать для этого глобальный стейт не камильфо. Пытаюсь разобраться с lifting state up из Tooltip в родителя ParentComponentSecond и ParentComponentFirst
    – Ivan
    10 сен 2020 в 5:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.