Да, возможно поместить логику в компонент с использованием кастомных хуков.
Компонент может содержать свою собственную логику, состояние и функции обработки событий. Кастомные хуки позволяют организовать и повторно использовать эту логику в разных компонентах.
Например, для инкапсуляции логики отображения и закрытия попапа в самом компоненте можно создать кастомный хук, который будет содержать состояние попапа и функции для его отображения и закрытия. Компонент будет использовать этот хук, чтобы получить доступ к состоянию попапа и функциональности его управления.
Пример кастомного хука с логикой отображения попапа:
```javascript
import { useState } from 'react';
const usePopup = () => {
const [isOpen, setIsOpen] = useState(false);
const openPopup = () => {
setIsOpen(true);
};
const closePopup = () => {
setIsOpen(false);
};
return {
isOpen,
openPopup,
closePopup,
};
};
export default usePopup;
```
Компонент, использующий этот хук:
```javascript
import React from 'react';
import usePopup from './usePopup';
const MyComponent = () => {
const { isOpen, openPopup, closePopup } = usePopup();
return (
<div>
<button onClick={openPopup}>Открыть попап</button>
{isOpen && (
<div>
<p>Контент попапа</p>
<button onClick={closePopup}>Закрыть попап</button>
</div>
)}
</div>
);
};
export default MyComponent;
```
В этом примере логика отображения и закрытия попапа инкапсулирована в кастомный хук `usePopup()`. Компонент `MyComponent` использует этот хук для получения состояния попапа и функциональности его открытия/закрытия. Таким образом, компонент самостоятельно управляет логикой попапа без необходимости создания состояния и дополнительной логики в родительском компоненте.