return (
<div className="Question-list">
{this.props.data.map((value, index) => {
const cn = []
if (value === 1) {
cn.push('Question-list-item--current')
}
else {
cn.push('Question-list-item')
}
return <li onClick={this.setChosenQuestionNumber} key={value.id} className={cn.join(' ')}>
<span className="question-list-number">{index + 1}</span>
</li>
})}
</div>
)import React, { Component } from 'react'
export default class Example extends Component {
constructor (props) {
super(props)
this.state = {
value: this.props.bool ? this.props.value1 : this.props.value2
}
}
componentWillReceiveProps (nextProps) {
// тут доступны пропсы делайешь проверку со стейтом и все что тебе нужно
if (nextProps.bool) {
this.setState({...this.state, value: nextProps.value1})
} else {
this.setState({...this.state, value: nextProps.value2}, () => {
// тут можно сделать что то еще
})
}
}
render () {
return (
<div>...</div>
)
}
}var hammertime = new Hammer(document.body, {
enable: true,
recognizers: [
[Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }]
]
});
hammertime.on('swipeleft', function(ev) {
// hide menu
});
hammertime.on('swiperight', function(ev) {
// show menu
});parentСomponent {
dataUpdate (data) {
// тут ты получаешь данные
},
render (
<childrenComponent dataUpdate={this.dataUpdate.bind(this)} />
)
}
childrenComponent {
props {
dataUpdate: func
}
//при любых изменениях данных передаешь их в родительскую функцию и родитель получает данные
}onChangeHandler (e) {
this.setState({
myValue: e.nativeEvent.target.value
})
}onChange={this.onChangeHandler}onChange={this.onChangeHandler.bind(this)}