Higher-Order Component (HOC) можно создать, обернув компонент, который использует паттерн render props. Такой подход даёт гибкость — разработчик может выбрать, использовать ему render props или HOC, как удобнее.
Базовая структура — это функция, которая принимает компонент и возвращает новый компонент:
function withMouse(Component) {
return class extends React.Component {
render() {
return (
<Mouse render={mouse => (
<Component {...this.props} mouse={mouse} />
)}/>
);
}
}
}
withMouse получает целевой компонент как аргумент<Mouse /> с render propmouse) и передаёт их обёрнутому компоненту{...this.props} плюс дополнительные данные mouseТакой подход показывает, что render props и HOC — это взаимодополняющие паттерны, которые решают одну и ту же задачу — шаринг логики компонента — разными способами.
HOC, который использует render props внутри, оборачивает компонент с render props и передает полученные данные обёрнутому компоненту через пропсы.
Новый — ещё не проверен сообществом
Вы