Разная логика работы с компонентом 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 => выполняй ф-ию Это нормальное решение для моего случая? Спасибо!