fix: update hoc
This commit is contained in:
@@ -41,4 +41,40 @@ Higher-Order Components (HOC) — это продвинутая техника
|
||||
|
||||
В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
|
||||
|
||||
## Пример
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
// HOC: принимает компонент и возвращает новый
|
||||
function withLogger(WrappedComponent) {
|
||||
return function WithLogger(props) {
|
||||
console.log('Props:', props);
|
||||
|
||||
// можно добавить любую доп. логику
|
||||
return <WrappedComponent {...props} />;
|
||||
};
|
||||
}
|
||||
|
||||
// Базовый компонент
|
||||
function Hello({ name }) {
|
||||
return <h1>Hello, {name}!</h1>;
|
||||
}
|
||||
|
||||
// Оборачиваем в HOC
|
||||
const HelloWithLogger = withLogger(Hello);
|
||||
|
||||
// Использование
|
||||
export default function App() {
|
||||
return <HelloWithLogger name="Tomas" />;
|
||||
}
|
||||
```
|
||||
🔍 Что здесь происходит:
|
||||
1. `withLogger` — это HOC, который принимает компонент `WrappedComponent`.
|
||||
2. Он возвращает новый компонент `WithLogger`, который:
|
||||
- Логирует входящие props;
|
||||
- Рендерит исходный компонент, передавая ему те же `props`.
|
||||
3. В итоге `HelloWithLogger` ведёт себя как `Hello`, но с дополнительной функциональностью (логированием).
|
||||
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
Reference in New Issue
Block a user