Как уничтожить один компонент если этот же компонент отрендерен в другом месте? REACT

Question

Столкнулся с такой проблемой. У меня есть компонент 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 то первый бы уничтожался

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

Answer 1

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

Answer 2

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

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

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

БЛОГ НА HUSL

Как уничтожить один компонент если этот же компонент отрендерен в другом месте? REACT

Ответы (2 шт):