Skip to content

Instantly share code, notes, and snippets.

@SirSerje
Created June 24, 2019 13:26
Show Gist options
  • Save SirSerje/4bac7ea60832fa26ce22c61b260c68a6 to your computer and use it in GitHub Desktop.
Save SirSerje/4bac7ea60832fa26ce22c61b260c68a6 to your computer and use it in GitHub Desktop.
react hoc example
//функция, которая формирует тему
const makeStyle = theme => ({
background: theme.mainColor,
})
//Сам ХОК
const WithStyle = styleParam => (WrappedComponent) => {
return class withStyleHOC extends React.Component {
render() {
const myProps = { someProp: 123 };
console.log('this.props', this.props);
return <WrappedComponent something={styleParam} {...this.props} {...myProps} />;
}
};
};
//компонент который засунем в ХОК
const Component = (param) => {
return (
<div style={param.something}>
Hello, world
</div>
);
};
//тема по умолчанию
const defaultTheme = { mainColor: 'green' };
//создания ХОКа (прокидываем тему и стиль и компонент)
const Some = WithStyle(makeStyle(defaultTheme))(Component);
//имплементация ХОКа
const Content = () => (
<div className="container">
<Some text="TEXT" />
</div>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment