如何在 React 中包含自定义 Javascript 文件

Question

我有一个问题。 我刚开始使用 React，我不知道如何包含或导入我的自定义 Js 文件。 我创建了自定义 slider (carousel) 组件 (rfce)，其中包含自定义 vanila javascript，当我运行应用程序时，我收到此消息： “typeError: cannot read property 'addeventlistener' of null” 。

我该如何预防？ 我知道这个文件应该最后加载（如果我不使用 React，我会在 body 元素的底部包含 script.js）。

const left = document.querySelector('.left');
const right = document.querySelector('.right');
const slider = document.querySelector('.slider');
const indicatorParent = document.querySelector('.control ul'); 
const indicators = document.querySelectorAll('.control li');
var index = 0;

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.control .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX(' + (i) * -25 + '%)';  
    index = i;
    
  });
});

  left.addEventListener('click', function() {
    index = (index > 0) ? index -1 : 0;
    document.querySelector('.control .selected').classList.remove('selected');
    indicatorParent.children[index].classList.add('selected');
    slider.style.transform = 'translateX(' + (index) * -25 + '%)';
  });

 
  right.addEventListener('click', function() {
    index = (index < 4 - 1) ? index+1 : 3;
    document.querySelector('.control .selected').classList.remove('selected');
    indicatorParent.children[index].classList.add('selected');
    slider.style.transform = 'translateX(' + (index) * -25 + '%)';
  });

谢谢！

Answer 1

我建议你用 react 重写这个文件。 我假设具有left，right，slider等类的元素都应该通过react动态应用，如果是这种情况，你必须用react重写逻辑，因为querySelector和addEventListener不会在dom更改时响应更新它们的目标（不像反应）