时间戳

首页 > 解决方案 > 反应组件中的滑块返回“无法读取未定义的属性样式”

javascript - 反应组件中的滑块返回“无法读取未定义的属性样式”

问题描述

我试图为滑块创建一个组件，但由于某种原因它不起作用！

第一次渲染时，出现以下错误：“无法读取未定义的属性样式...”。

当我尝试记录x[slideIndex-1]时，我首先得到 undefined，然后在 onClick 事件侦听器触发后得到正确的值。

同样，当我在单击任何按钮之前记录x.length时，我得到 0，但在 onClick 之后它切换到 4。

这是整个组件文件：

import React from 'react';

export default () => {
  var slideIndex = 1;
    showDivs(slideIndex);

  function plusDivs(n) {
    showDivs(slideIndex += n);
}

  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slider__img");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    x[slideIndex-1].style.display="block";
}

  return (
    <div className="content-container">
      <img className="slider__img" src="../images/foo.jpg"/>
      <img className="slider__img" src="../images/foo2.jpg"/>
      <img className="slider__img" src="../images/foo3.jpg"/>
      <img className="slider__img" src="../images/foo4.jpg"/>
      <button onClick={()=>plusDivs(1)}>Next</button>
      <button onClick={()=>plusDivs(-1)}>Previous</button>
    </div>
  )
}

标签： javascriptreactjs

解决方案

就像评论中指出的那样。使用 React 时直接操作 DOM 元素是不好的做法。React 使用虚拟 DOM。为了最小化 DOM 操作，React 首先计算出必须在虚拟 DOM 中应用的所有更改，然后将其实际渲染到真实 DOM。这就是为什么在使用 React 时自己操作 DOM 元素可以被视为一种反模式。

解决您的问题的一种方法是：

import React, { Component } from 'react';

export class YourComponent extends Component {
  constructor() {
    super();
    this.state = {
      slideIndex: 1,
      images: [
        '../images/foo.jpg',
        '../images/foo2.jpg',
        '../images/foo3.jpg',
        '../images/foo4.jpg'
      ]
    };
  }

  pludDivs(n) {
    const { images } = this.state;
    if (n > images.length) {
      this.setState({ slideIndex: 1 });
    }
    if (n < 1) {
      this.setState({ slideIndex: images.length - 1 });      
    }
  }

  render() {
    const { images, sliderIndex } = this.state;
    return (
      <div className="content-container">
        <img className="slider__img" src={images[slideIndex]} />
        <button onClick={() => plusDivs(1)}>Next</button>
        <button onClick={() => plusDivs(-1)}>Previous</button>
      </div>
    );
  }
}

希望这可以帮助！请让我知道，如果你有任何问题。

推荐阅读