import React from 'react';
import { connect } from 'react-redux';
class List extends React.Component {
componentDidMount() {
this.props.onPageLoad('Page list');
}
render() {
return null;
}
}
const mapDispatchToProps = (dispatch) => ({
onPageLoad: (title) => {
dispatch({type:'SET_TITLE', title});
}
});
export default connect(null, mapDispatchToProps)(List);export class IconStar extends React.Component{
constructor(props) {
super(props);
this.state = {
fill: svgicons.starIcon.deactiv,
className: 'transparent'
}
this.fix_it = this.fix_it.bind(this);
}
fix_it(e){
const { fix, actions } = this.props;
this.setState({
fill: fix ? svgicons.starIcon.deactiv : svgicons.starIcon.active,
className: this.state.class === "transparent" ? "show" : "transparent";
});
actions.fixation();
}
render(){
const { className, fill } = this.state;
return(
<div>
<svg
className={`star_icon ${className}`}
aria-labelledby="title"
onClick={this.fix_it}
>
<title id="title">Нажмите, чтобы закрепить вверху списка</title>
<path d={fill} />
</svg>
</div>
)
}
}
function fixation(){
return (dispatch, getState) => {
let state = getState();
if (!state.controlR.fix) {
dispatch({ type : 'FIX_IT', fix : true });
}
else {
dispatch({ type : 'FIX_IT', fix : false });
}
};
}
const actionCreators = { fixation: fixation };
export default connect(
state => ({ fix : state.controlR.fix }),
dispatch => { actions: bindActionCreators(actionCreators, dispatch) }
)(IconStar);<main id="whateverId" class="whateverClass"></main><main>
<div id="whateverId" class="whateverClass"></div>
</main><section class="hobbies">
<header class="hobbies__header">Мои увлечения</header>
<ul class="hobbies__list">
<li>
<h3 class="hobbies__item">Лыжи</h3>
<p class="hobbies__item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quia ab eveniet harum cumque placeat, beatae voluptas nobis ipsam debitis.</p>
</li>
<li>
<h3 class="hobbies__item">Плаванье</h3>
<p class="hobbies__item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis totam eaque recusandae corporis ratione nostrum cumque facere quaerat fugit fugiat.</p>
</li>
</ul>
</section><Route path="/" component={App} onEnter={App.onEnter}><Route path="/" component={App} >
var $activeElements = $('.element.active');
$activeElements.removeClass('active');