Разная логика работы с компонентом children

У меня есть компонент Container, который является конейнером. Он наполняется из родителя Parent с помощью props.children. В данном контейнере в зависимости от логики может рендерится текст или другой компонент. На текст пользователь может нажать, чтобы появилось всплывающее окно с подсказкой. Но вот на компонент пользователь тоже может нажать и там должна быть своя логика. При этом вот как выглядит Container:

const Container = ( {children, handleOnClick, tag} ) => {
    return (
        <div onClick={() => handleOnClick(tag)}>
            {children}
        </div>
    )
}

Вот как выглядит Parent:

const Parent = () => {

    function doSomething() {
        console.log('эта функция нужна только на некоторых Container')
    }

    return (
        <div>
            <Container tag={clickOk} handleOnClick={doSomething}>Кликнули сюда и ок!</Container>
            <Container tag={clickError}>ОШИБКА</Container>
            <Container>{learn_data.name}</Container>  
        </div>
    )
};

Вот собственно упрощенно как-то так. Т.е. есть Container и внутри него зашита ф-ия onClick. Только вот беда в том, что на каких-то Container`ах мне нужен ее вызов, а на каких-то нет...

Немного подумав, я попробовал поставить заглушку вот так:

const Container = ({ children, handleOnClick, tag }) => {

    const handleOnClickTest = (evt, tag) => {
        if (tag) {
            return handleOnClick(evt, tag)
        }

    }
    return (
        <div onClick={() => handleOnClickTest(tag)}>
            {children}
        </div>
    )
}

т.е. если приходит tag !== undefind => выполняй ф-ию Это нормальное решение для моего случая? Спасибо!


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