fix: update hoc
This commit is contained in:
@@ -43,6 +43,8 @@ Higher-Order Components (HOC) — это продвинутая техника
|
|||||||
|
|
||||||
## Пример
|
## Пример
|
||||||
|
|
||||||
|
💥 Логгируем входящие props
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
@@ -77,4 +79,19 @@ export default function App() {
|
|||||||
3. В итоге `HelloWithLogger` ведёт себя как `Hello`, но с дополнительной функциональностью (логированием).
|
3. В итоге `HelloWithLogger` ведёт себя как `Hello`, но с дополнительной функциональностью (логированием).
|
||||||
|
|
||||||
|
|
||||||
|
💥 HOC для аутентификации
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
function withAuth<P extends object>(
|
||||||
|
WrappedComponent: React.ComponentType<P>
|
||||||
|
) {
|
||||||
|
return function WithAuthHOC(props: P & { isAuthenticated: boolean }) {
|
||||||
|
if (!props.isAuthenticated) {
|
||||||
|
return <div>Доступ запрещён. Войдите в систему.</div>;
|
||||||
|
}
|
||||||
|
return <WrappedComponent {...props} />;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
🚀 **_Источник: DeepSeek_**
|
🚀 **_Источник: DeepSeek_**
|
||||||
Reference in New Issue
Block a user