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

Question

所以目前我正在尝试在单击图像时将另一个组件页面的特定部分链接到 img。现在我在下面的组件中执行此操作，它会将我带到 questions/1234 页面，但不会转到 questions/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“two”。我怎样才能做到这一点？请记住这是 React

Answer 1

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

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

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