нажмите на IMG, который будет ссылаться на определенный раздел на другой странице

Question

поэтому в настоящее время я пытаюсь связать определенный раздел страницы другого компонента с 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 "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

Ваш пример кода выглядит как responsejs, отсюда и этот ответ. В прошлом мне приходилось использовать библиотеку под названием react-scrollable-anchor. Проверьте это here

So in your case it'll probably look like so:

import ScrollableAnchor from 'react-scrollable-anchor';

// your other stuffs...

 render() {
    return 
      
        1
      
    

    
      
        2
      
    

    
      
        3
      
    

  }

Примечание. Ваши методы рендеринга выглядят странно без возврата.

Если вы используете Angular, о котором я очень мало знаю, вы можете проверить эту библиотеку https://www.npmjs.com/package/ng2-page-scroll

Кроме того, для чего-то более простого, чем это, вы ожидаете, что не будете использовать другую библиотеку поверх уже имеющейся у вас библиотеки маршрутизации. Проверьте эти темы GitHub для:

• реакции (с использованием реакции-маршрутизатора) => https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604
• угловой => https://github.com/angular/angular/issues/14245

Кроме того, использование вами события onClick для тега img кажется мне немного вынужденным (чрезмерное использование js). Есть ли причина, по которой вы не делаете, как предложил @Джон Руделл в своем комментарии? то есть оборачиваем ваше изображение в якорь примерно так:

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>
 }

Примечание: технически, есть разговоры о том, что вышеупомянутое не является действительным 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>
 }

Надеюсь, это поможет.