Question

我是React的新手，我有一个简单的js滑块，我尝试在React上重写它。我的问题是在startSlider（）中的数组上的特定元素上设置属性。如何在setInterval（）中设置属性？错误是：createdImages [（this.state.slide％3）]。setAttribute不是函数

这是代码：

Operation op;

lock.lock();
try {
    op = deque.pollLast(); // poll won't throw exception if there is no element
} finally {
    lock.unlock();
}

if (op != null) {
    op.perform();
}

Answer 1

您可以尝试使用处于状态的活动幻灯片，而不是尝试在图像元素上手动设置属性，而是选择要赋予类别active的幻灯片。

示例

class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imagesArray: ["css", "html", "javascript"],
      slide: 0
    };
  }

  componentDidMount() {
    this.sliderInterval = setInterval(() => {
      this.setState(previousState => {
        return {
          slide: (previousState.slide + 1) % previousState.imagesArray.length
        };
      });
    }, 2500);
  }

  componentWillUnmount() {
    clearInterval(this.sliderInterval);
  }

  render() {
    return (
      <div>
        {this.state.imagesArray.map((image, index) => {
          return (
            <img
              key={image}
              className={index === this.state.slide ? "active" : ""}
              src={require(`./img/${image}.png`)}
            />
          );
        })}
      </div>
    );
  }
}

在间隔函数中反应setAttribute

1 个答案: