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

Question

我有一个问题。我刚开始使用React，我不知道如何包含或导入我的自定义Js文件。我创建了自定义滑块(carousel)组件(rce)，包括自定义香草javascript，当我运行应用程序时，我得到了这个消息:"typeError:无法读取属性'addeventlistener'的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发生变化(不像react)，则不会主动更新其目标