我想在悬停期间添加第一个和最后一个元素offset(translateX)(分别为left和right)。
在这种情况下如何写id的条件?
在css问题由:nth-child
解决
class Article extends React.Component{
constructor(props) {
super(props)
this.state = {showIncreaced: null}
this.getImgStyle = this.getImgStyle.bind(this);
this.increase = this.increase.bind(this);
}
increase (incId) {
this.setState({showIncreaced: incId})
}
getImgStyle (id) {
return {
width: '20vw',
marginRight: '0.5vw',
marginLeft: '0.5vw',
position: 'relative',
zIndex: this.state.showIncreaced === id ? '10' : '0',
transform: this.state.showIncreaced === id ? 'scale(1.5, 1.5)' : 'scale(1, 1)'
};
}
render(){
const TipStyle={
marginBottom: '10px'
}
return(
<div style={TipStyle}>
<h2 style={{marginBottom: '1px'}}>{this.props.name}</h2>
<div>
{[1,2,3].map((id) => {
return <img style={this.getImgStyle(id)} src={this.props[`img${id}`]} onMouseOver={this.increase.bind(this, id)} onMouseOut={this.increase} />
})}
</div>
</div>
);
}
}
即使没有索引,您也可以通过以下方式完成。当param不止一个时,你只需要this()
下面一个也有效
{[1,2,3].map(id => {
// if (index === 0) { return other }
// if (index === [1,2,3].length - 1) { return another }
return <img key={id} style={this.getImgStyle(id)} src={this.props[`img${id}`]} onMouseOver={this.increase.bind(this, id)} onMouseOut={this.increase} />
})}
.map
函数将索引作为第二个参数:
{[1,2,3].map((id, index) => {
// if (index === 0) { return other }
// if (index === [1,2,3].length - 1) { return another }
return <img style={this.getImgStyle(id)} src={this.props[`img${id}`]} onMouseOver={this.increase.bind(this, id)} onMouseOut={this.increase} />
})}