Если вы размещаете в IIS express и вы открываете проект в двух разных местах, вы можете увидеть эту ошибку.
Решение - перейти к Project/Properties/Web/Servers
и нажать Create Virtual Directory
.
Сохранение контекста класса в переменной вне привязки события. Затем создайте IIFE и свяжите его контекст с сохраненным.
componentDidMount() {
const ctx = this;
svgViewport.on('mousemove', function (d, i) {
if (mouseIsOverStream) {
let mousex = d3.mouse(this);
mousex = mousex[0];
!function () {
// here I want this of the class instance context
this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
}.bind(ctx)();
}
});
}
Кроме того, это должно работать тоже:
componentDidMount() {
svgViewport = ...;
svgViewport.on('mousemove', (d, i) => {
if (mouseIsOverStream) {
let mousex = d3.mouse(svgViewport); // here
mousex = mousex[0];
this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
}
});
}
Вы можете использовать функции стрелок, чтобы получить доступ к контексту this
экземпляра и по-прежнему получать текущий элемент DOM. Для элемента DOM вы прибегаете к малоизвестному и часто пропускаемому третьему параметру прослушивателя событий. Поскольку у документов есть это (выделение мое):
указанный слушатель будет оценен для элемента, передавая текущий набор данных ( d ), текущий индекс ([117 ] i ) и текущая группа ( узлов )
blockquote>Поскольку текущий индекс
i
является указателем на текущую группуnodes
Вы можете ссылаться на текущий элемент DOM какnodes[i]
.Ваш код становится:
svgViewport.on('mousemove', (d, i, nodes) => { if (mouseIsOverStream) { let mousex = d3.mouse(nodes[i]); // get the current element as nodes[i] mousex = mousex[0]; // this now refers to your instance this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex); } });