Question

我是ReactJS的新手，我想知道在反应中使用相同类来定位下一个元素的正确方法是什么？

<div className="portfolioGallery">
    <img className="portfolioImg activeImg" src="img/1.png"/>
    <img className="portfolioImg" src="img/2.png"/>
    <img className="portfolioImg" src="img/2.png"/>
  <div className="portfolioNext" onClick={this.nextImg.bind(this)}>
     Next image
  </div>
</div>

当我单击portfolioNext div时，我能够提供img2类的activeImg并将其从前一个元素中删除，在ReactJS中依此类推，这是正确的方法吗？

谢谢！

constructor() {
    super();
    this.state = {
        default: "portfolioImg activeImg"
    };
}

nextImg() {
    this.setState({
        default: "portfolioImg"
    });
}

Answer 1

这是你在jQuery代码中通常会发现的那种必要技术，但它并没有很好地映射到React稍微更具说明性的本质。

使用state来维护这些元素的列表以及索引游标，而不是尝试使用类查找下一个元素。

// constructor
this.state = {
  images = ['img/1.png', 'img/2.png', 'img/3.png']
  cursor: 0
};

然后使用这些数据位来渲染您的视图。

// render
const { images, cursor } = this.state;
return (
  <div>
    {images.map((src, index) => {
      const activeClass = (index === cursor) ? 'activeImg' : '';
      return <img className={`portfolioImg ${activeClass}`} />;
    }}
  </div>
);

要更改活动图像，请使用setState更改cursor属性。

// nextImg
const { cursor, images } = this.state;
const nextCursor = cursor % images.length;

this.setState({ cursor: nextCursor });

Answer 2

我不建议你把它想象成兄弟姐妹找对方，而是把它当作父母存储当前孩子的索引，然后更新它。

this.props（或this.state）会有类似的内容（伪代码）

this.props.images => ["img/1.png", "img/2.png", "img/2.png"];

内部渲染：

<div className="portfolioGallery">
    {this.props.images.map((image, i ) => active === i ? (<img className="portfolioImg activeImg" src="image" key={i}/>) : (<img className="portfolioImg " src="image" key={i}/>))}
    <button className="portfolioNext" onClick={(e) => this.setState({active: this.state.active + 1}).bind(this)}>Next image</button>
</div>

当然，考虑到active >= images.length的时间，但你明白了

ReactJS onClick .next（）元素具有相同的类？

2 个答案: