React,访问特定的id(比如在css工作:nth- child)

问题描述 投票:1回答:2

我想在悬停期间添加第一个和最后一个元素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>                  
); 
}
}

https://jsfiddle.net/Nata_Hamster/5hd3yt4z/

reactjs css-selectors id
2个回答
1
投票

即使没有索引,您也可以通过以下方式完成。当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} />
    })}  

1
投票

.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} />
    })}  
© www.soinside.com 2019 - 2024. All rights reserved.