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');    
}

Answer 2

您的示例代码看起来像reactjs，因此是这个答案。我过去必须做的是使用一个名为react-scrollable-anchor的库。签出here

所以在您的情况下，它可能看起来像这样：

import ScrollableAnchor from 'react-scrollable-anchor';

// your other stuffs...

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

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

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

  }

注意：您的 render 方法看起来很奇怪，没有返回值。

在您不太了解Angular的情况下，您可能会签出这个库https://www.npmjs.com/package/ng2-page-scroll

此外，对于这样简单的事情，您希望不要在已经拥有的路由库之上使用另一个库，请猜测它并不是那么简单。检查这些github线程是否为：

反应（使用react-router）=> https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604
角度=> https://github.com/angular/angular/issues/14245

此外，您在onClick标记上使用img事件对我来说有点强迫（js过度使用）。您是否有理由不按照@John Rudell在其评论中的建议进行操作？即将您的图片包裹在锚点中，如下所示：

handleClick(event) {
  // Not today we're just going to use an anchor for this
  // this.props.history.push('/questions/1234')

}

render() {
   <a href="/questions/1234#two >
     <img src={"/public/123"} className="thumbnail" />
   </a>
 }

注意：从技术上讲，按照dom嵌套规则，上述内容不是有效的html。将内联块嵌套在内联元素内。有解决方案。我只是不想分散使用正确工具的简单想法。

如果OP或其他任何人想知道，则解决方案可能是：

render() {
  <div style={{ position: "relative" }} >
     <img src={"/public/123"} className="thumbnail" />
     <a
      href="/questions/1234#two
      style={{
        position: "absolute",
        top: 0,
        bottom: 0,
        width: "100%"
    />
  </div>
 }

希望有帮助。

onclick会链接到另一页上特定部分的img

2 个答案: