时间戳

首页 > 解决方案 > onclick 将链接到另一个页面上的特定部分的 img

javascript - onclick 将链接到另一个页面上的特定部分的 img

问题描述

所以目前我正在尝试在单击图像时将另一个组件页面的特定部分链接到 img。现在我在下面的组件中执行此操作，该组件将我带到问题/1234 页面，而不是问题/1234 的确切部分

handleClick(event) {
  this.props.history.push('/questions/1234')

}

render() {
     <img src={"/public/123"} onClick= {event => 
     this.handleImageClick(event)} className="thumbnail"/>
     />
 }

单击时我将图像链接到的组件是

  render() {
      <div id="one">
          1
      </div>

      <div id="two">
          2
      </div>

      <div id="three">
          3
      </div>

  }

而且我想这样做，以便当我单击第一个组件中的图像时，这将引导我进入另一个组件的 div“两个”。我怎样才能做到这一点？请记住这是 React

标签： javascriptreactjsfrontend

解决方案

如果我正确理解了您的问题，那么这应该可以通过在导航到的页面路径中指定一个哈希来实现。

如果哈希值与id被导航到的页面中的元素匹配，则浏览器应自动滚动到该元素以确保其可见：

handleClick(event) {
  /* 
  Adding #two causes browser to ensure that <div id="two"> is visible
  after navigation
  */
  this.props.history.push('/questions/1234#two');    
}

推荐阅读