Javascript 在我的React.js项目中，我在js文件中使用了一些代码，在我的网页上添加了滑块TypeError:cannotreadproperty'；风格'；未定义的

我面对这个事实，我不明白实际的错误是我遗漏了哪些术语

我已经尝试过修复它，在chrome浏览器的控制台中，它在我在代码片段中给出的起始标记行中找到了一个错误

幻灯片[当前].style.display='block'；这是我在浏览器中发现的实际行获取错误

export default function Slider() {

  let slide = document.querySelectorAll('.slide');
  var current = 0;

  function cls(){
      for(let i = 0; i < slide.length; i++){
            slide[i].style.display = 'none';
      }
  }

  function next(){
      cls();
      if(current === slide.length-1) current = -1;
      current++;

      **slide[current].style.display = 'block';**
      slide[current].style.opacity = 0.4;

      var x = 0.4;
      var intX = setInterval(function(){
          x+=0.1;
          slide[current].style.opacity = x;
          if(x >= 1) {
              clearInterval(intX);
              x = 0.4;
          }
      }, 100);

  }

  function prev(){
      cls();
      if(current === 0) current = slide.length;
      current--;

      slide[current].style.display = 'block';
      slide[current].style.opacity = 0.4;

      var x = 0.4;
      var intX = setInterval(function(){
          x+=0.1;
          slide[current].style.opacity = x;
          if(x >= 1) {
              clearInterval(intX);
              x = 0.4;
          }
      }, 100);

  }

  function start(){
      cls();
      slide[current].style.display = 'block';
  }
  start();

  return (
   
   
   
   
   <div>

              <div class="container">
                <div class="arrow l" onclick="prev()">
                  <img src={s1.jpg} alt="l" />
                </div>
                <div class="slide slide-1">
                  <div class="caption">
                    <h3>New York</h3>
                    <p>We love the Big Apple!</p>
                  </div>
                </div>
                <div class="slide slide-2">
                  <div class="caption">
                    <h3>Los Angeles</h3>
                    <p>LA is always so much fun!</p>
                  </div>
                </div>
                <div class="slide slide-3">
                  <div class="caption">
                    <h3>Bahar Dar</h3>
                    <p>Thank you, Bahar Dar!</p>
                  </div>
                </div>
                <div class="arrow r" onclick="next()">
                  <img src={s2.jpg} alt="r" />
                </div>
              </div>

    </div>
  )

}

导出默认函数滑块（）{
let slide=document.queryselectoral（'.slide'）；
无功电流=0；
函数cls（）{
for（设i=0；i=1）{
清除间隔（intX）；
x=0.4；
}
}, 100);
}
函数prev（）{
cls（）；
如果（电流===0）电流=slide.length；
当前--；
幻灯片[当前].style.display='block'；
幻灯片[当前].style.opacity=0.4；
var x=0.4；
var intX=setInterval（函数（）{
x+=0.1；
幻灯片[当前].style.opacity=x；
如果（x>=1）{
清除间隔（intX）；
x=0.4；
}
}, 100);
}
函数start（）{
cls（）；
幻灯片[当前].style.display='block'；
}
start（）；
返回(
纽约
我们喜欢大苹果

洛杉矶
洛杉矶总是那么有趣

巴赫达尔
谢谢你，巴哈达尔

)
}

您是否检查了“当前”值？我认为这是因为您首先执行函数

start（）

然后渲染然后返回它。我认为应该将slider作为组件，并使用

componentDidMount（）

确保在函数开始之前呈现它。