Javascript 反应：添加className="；主动的；在水平滚动后列出项目（css:overflow-x:scroll；）

我希望根据React中滑块上的水平滚动行为更新列表项上的类名。有没有关于我如何解决这个问题的建议？到目前为止，我还没有找到解决办法

当前，一个图像填充整个窗口宽度，滚动下一个项目时可见。但我还想让这个开关在ul列表项中可见。基本上，在滚动之后，我希望列表项1中的类名变为“非活动”，第二个列表项的类名变为“活动”，依此类推

基本上，主要组件如下所示：

import React, { Component } from 'react';
import Slider from './Slider';

export default class Property extends Component {

  constructor(props) {
    super(props);
    this.state = {
      object: [
        {
          title: "...",
          description: "...",
          img: "...",
        },
        {
          ...}
      ]
    };
  }

  render() {
    return (
      <div id="property">
        <div className="detailsWrapper">
          <h2>Lodge Highlights</h2>
          <Slider object={this.state.object}/>
          <ul>
            <li className="is-active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“./Slider”导入滑块；
导出默认类属性扩展组件{
建造师（道具）{
超级（道具）；
此.state={
对象：[
{
标题：“…”，
说明：“…”，
img:“…”，
},
{
...}
]
};
}
render（）{
返回(
洛奇精选酒店







)
}
}

我的滑块组件如下所示：

import React, { Component } from 'react';

export default class Slider extends Component {

  render() {
    return (
      <div className="higlights_slider">
        {this.props.object.map((eachObject, index) => {
          return (
            <div className="highlights_slider_content" key={eachObject.id} value={eachObject.id}>
              <img src={eachObject.img} alt=""/>
              <h3>{eachObject.title}</h3>
              <h4>{eachObject.description}</h4>   
            </div>
            )
           })}
        </div>
    )
  }
}

import React，{Component}来自'React'；
导出默认类滑块扩展组件{
render（）{
返回(
{this.props.object.map（（eachObject，index）=>{
返回(
{eachObject.title}
{eachObject.description}
)
})}
)
}
}

在我的css（或SCS）中，我使用.highlights_滑块

overflow-x:scroll

---

感谢您的帮助！提前谢谢

有很多方法可以做到这一点，但我会为每一张幻灯片推荐交叉口观察员（最佳方法）

如果您在实现观察器方面需要帮助，请告诉我

你只需要一节课。每次滑块超过阈值时，观察者都会通知您，因此您可以从当前索引为-1的幻灯片中删除该类，并将该类添加到当前幻灯片中。

您只需要一个类。

---

每次滑块超过阈值时，观察者都会通知您，因此您可以从当前索引为-1的幻灯片中删除该类，并将该类添加到当前幻灯片中。

hey！非常感谢你！我也刚刚发现了这一点。我会尝试，如果它不起作用，我会非常高兴地回复你。事实上，我有一个问题-你是否需要为每个slider_内容添加单独的类名？例如className=“highlights\u slider\u content\u[index]”因为您需要观察每个单独的项目？或者我可以只观察整个窗口（.highlights\u滑块）@莫斯克