{
test: /\.js$/,
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-0', 'react']
}
}]
},npm install -S babel-preset-stage-0
const first = 'some classes';
const second = 'some classes';
const myQuery = {
hasMinWidth: {
minWidth: 1024,
},
};
class Header extends Component {
state = {
headerSticky: headerSticky(),
};
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
};
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
};
handleScroll = e => {
this.setState({
headerSticky: headerSticky(),
});
};
getHeaderClass() {
const {
containerQuery: { hasMinWidth },
} = this.props;
return hasMinWidth ? first : second;
}
render() {
const {
headerSticky,
} = this.state;
const headerClasses = headerSticky + this.getHeaderClass();
return (
<div className={headerClasses}>
<Grid>
<Row>
<Col sm={2} xs={6}>
<img src={logo} className="header-logo" alt=""/>
</Col>
<Col sm={10} xsHidden={true}>
<nav className="header-nav">
{header_links.map((anchor) => (
<a href={anchor.link}>{anchor.name}</a>
))}
</nav>
</Col>
</Row>
</Grid>
</div>
);
}
}
export default applyContainerQuery(Header, myQuery);
По поводу вопроса, вам следовало перечислить все требования к функционалу. Тогда бы вам, точно, посоветовали, как можно оптимизировать ваш код, чтобы он работал именно так как надо вам.