React中TomTom地图弹窗点击页面滚动失效问题求助

我正在开发React应用，需要实现点击TomTom Maps SDK地图上自定义形状的弹窗后，页面滚动到下方对应id的区域（比如点击显示52724743的弹窗，要滚到同id的菜单区），但尝试的两种实现都无法生效。

尝试的两种实现代码 #

方案1：React事件绑定（失效） #

this.popup = new tt.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'tt-popup -black',
        anchor: 'top'
    })
        .setLngLat(calculatePopupPosition(coordinates))
        .setHTML(ReactDOMServer.renderToString(
            <>
            <a onClick={() => {
                const element = document.getElementById(id);
                element.scrollIntoView({behavior: 'smooth'})
            }}>{id}</a>
            </>
        ))
        .addTo(map);

方案2：a标签锚点（失效） #

this.popup = new tt.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'tt-popup -black',
        anchor: 'top'
    })
        .setLngLat(calculatePopupPosition(coordinates))
        .setHTML(ReactDOMServer.renderToString(
            <>
            <a href={"#" + id}></a>
            </>
        ))
        .addTo(map);

目标滚动区域代码 #

<>
    <div className="row m-3 p-4 block rounded" id={id}>
        <div className="col m-3 p-4">
            <h1>{id}</h1>
            <h3>Gebiedsgrootte: {GebiedsGrootte}</h3>
            <h3>Geselecteerde locaties: {puntenlengte}</h3>
            <h3>Geselecteerde containers: {containerteller}</h3>

            <div id={"Reistijd" + id}>
            {Reistijden.map(x => (
              <h3 key={x.wagensoort + x.traveltime}>Reistijd {x.wagensoort}: {x.traveltime}</h3>
        ))}
          </div>
            <select className="form-select" name="wagen" id={"wagen" + id} onChange={this.functie} ref={selectRef}>
              <option value={"Kies een optie"}>Kies een optie</option>
              {wagenpark.map(x => (
                <>
                <option key={x.wagensoort} id={x.wagensoort} value={x.wagensoort}>{x.wagensoort}</option>
                </>
              ))}
            </select>
            <br></br>

              <div className="row">
                <div className="col">
                <select className="form-select" name="xPerWeek" id={"xPerWeek" + id} onChange={() => this.xPerWeek("xpw")} ref={this.xpWeek}>
              <option value={0}>X Keer per week</option>
              <option value={1}>1</option>
              <option value={2}>2</option>
              <option value={3}>3</option>
              <option value={4}>4</option>
              <option value={5}>5</option>
              <option value={6}>6</option>
              <option value={7}>7</option>
            </select>
            </div>
            <div className="col">
            <select className="form-select" name="inXWeken" id={"inXWeken" + id} onChange={() => this.xPerWeek("ixw")} ref={this.iXWeek}>
              <option value={0}>Per X Weken</option>
              <option value={1}>1</option>
              <option value={2}>2</option>
              <option value={3}>3</option>
              <option value={4}>4</option>
              <option value={5}>5</option>
            </select>
            </div>
            <div className="col">
            <select className="form-select" name="Dagen" id={"Dagen" + id} onChange={()=> this.xPerWeek("dag")} ref={this.dagen}>
              <option value={0}>Op dag x</option>
              <option value={"Maandag"}>Maandag</option>
              <option value={"Dinsdag"}>Dinsdag</option>
              <option value={"Woensdag"}>Woensdag</option>
              <option value={"Donderdag"}>Donderdag</option>
              <option value={"Vrijdag"}>Vrijdag</option>
              <option value={"Zaterdag"}>Zaterdag</option>
              <option value={"Zondag"}>Zondag</option>
            </select>
            </div>
            </div>
            <div className="row">
              <button className="btn btn-warning" onClick={this.reset}>Reset</button>
            </div>

            <h3>{tekst}</h3>
            <h3>Afstand: {kilometers}</h3>

            <div className="dropdown">
            <button onClick={this.myFunction} className="dropbtn">Adressen</button>
            <div id={"myDropdown" + id} className="dropdown-content">
                <input type="text" placeholder="Search.." id={"myInput" + id} className="myInput" ref={input} onKeyUp={this.filterFunction}/>
                {punten.map(element => (
                <h4 key={element.id} className="blockformenu">{element.straat} {element.huisnummer}, {element.postcode.split(",")[0]} {element.plaats}</h4>
                ))}
            </div>
            </div>
            </div>

        <div className="col m-3 p-4">
        <input placeholder="Naam" ref={myRef}></input>
        <button className="btn btn-primary" onClick={this.submit}>Klik hier om op te slaan</button>
        </div>
        </div>
    </>

问题原因及修复方案 #

失效原因 #

1. 方案1失效：ReactDOMServer.renderToString仅生成静态HTML，React的事件处理函数（比如箭头函数）不会被绑定到DOM元素上——这个方法只负责输出HTML结构，不处理React的事件系统，所以点击事件根本不会触发。
2. 方案2失效：代码里的<a>标签是空的，用户无法点击到；另外TomTom弹窗可能会拦截a标签的默认跳转行为。

修复方案 #

方案1：用原生HTML绑定点击事件

直接编写原生HTML字符串，把滚动逻辑写在onclick属性里，绕开React的事件系统：

this.popup = new tt.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'tt-popup -black',
        anchor: 'top'
    })
        .setLngLat(calculatePopupPosition(coordinates))
        .setHTML(`<a onclick="document.getElementById('${id}').scrollIntoView({behavior: 'smooth'})">${id}</a>`)
        .addTo(map);

方案2：修复锚点a标签

给a标签添加可点击内容，确保用户能点击到：

this.popup = new tt.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'tt-popup -black',
        anchor: 'top'
    })
        .setLngLat(calculatePopupPosition(coordinates))
        .setHTML(ReactDOMServer.renderToString(
            <>
            <a href={"#" + id}>{id}</a>
            </>
        ))
        .addTo(map);

如果还是无法跳转，可手动监听弹窗点击事件处理滚动：

this.popup = new tt.Popup({
        closeButton: false,
        closeOnClick: false,
        className: 'tt-popup -black',
        anchor: 'top'
    })
        .setLngLat(calculatePopupPosition(coordinates))
        .setHTML(`<a data-id="${id}">${id}</a>`)
        .addTo(map);

// 监听弹窗内的点击事件
document.querySelector('.tt-popup').addEventListener('click', (e) => {
    if (e.target.tagName === 'A') {
        const targetId = e.target.dataset.id;
        const element = document.getElementById(targetId);
        if (element) {
            element.scrollIntoView({behavior: 'smooth'});
        }
    }
});

额外检查项 #

• 确认目标区域的id唯一且存在，没有重复的id值。
• 检查页面容器是否设置了overflow: hidden，这会阻止页面滚动。
• 确保id变量的作用域正确，没有出现未定义或值错误的情况。

内容的提问来源于stack exchange，提问作者J-Michael