В большом компоненте в React я хочу нажать на один элемент и перейти к другому элементу

Question

В React я хочу нажать на один элемент и прокрутить страницу до другого элемента.
Я видел ответ на этот вопрос в переполнении стека, но я не знаю, как реализовать его внутри большого компонента, такого как Я работаю с.

Оперативные части похоронены в компоненте ниже, но они следующие.
Функция, которая должна прокручивать до элемента ...
const scrollToRef = (ref) => window.scrollTo(0, this.myRef.current)

Создание Ref в конструкторе ...
this.myRef = React.createRef()

Элемент, на который я хочу нажать, прокручивает до нужного элемента ...
<a onClick={executeScroll}>

Элемент, который я буду sh, чтобы перейти к ...
<MyForm ref={this.myRef} />

Если я изменю ...
const scrollToRef = (ref) => window.scrollTo(0, this.myRef.current) на
const scrollToRef = (ref) => window.scrollTo(0, 1400), я получаю, где я хочу, но, конечно, он не знает, к какому элементу я прокручиваю, и не будет работать для мобильных устройств.

import React, { createRef } from 'react';
import Headroom from 'react-headroom'
import Fade from 'react-reveal/Fade';
import InfiniteScroll from 'react-infinite-scroll-component';
import HoverComp from './Hover'
import "animate.css/animate.min.css";
import ScrollAnimation from 'react-animate-on-scroll';
import MyForm from './myform'

import back from '../videos/tokyo_background.mp4'
import white from '../photos/white.jpg'
import fb_icon from '../photos/f.png'
import facebook_logo_white from '../photos/facebook-logo-white-c.png'
import z4881239_28446 from '../photos/84881239_2844929345568110_3163761343.png'


const scrollToRef = (ref) => window.scrollTo(0, this.myRef.current)   

export default class main extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.displayName = 'Item';
    this.state = {
      apiResponse: [],
      page: 0,
      isHovered: {}
    }
  }

componentDidMount() {
  window.scrollTo(0, 70);
  this.callAPI();
}

handleMouseEnter = index => {
  this.setState(prevState => {
    return { isHovered: { ...prevState.isHovered, [index]: true } };
  });
};

handleMouseLeave = index => {
  this.setState(prevState => {
    return { isHovered: { ...prevState.isHovered, [index]: false } };
  });
};

callAPI() {
    fetch('/api/getList')
        .then(res => res.json())
        .then(res => this.setState({ apiResponse: res }))
}

loadMoreRows = () => {
  this.setState({ page: this.state.page + 1 })
}

  render() {
    const { apiResponse, page, isHovered } = this.state;

    const executeScroll = () => scrollToRef(this.myRef)

    if(!apiResponse) {
        return <p className="row">Loading</p>
    }
    return(
      <div className="App">
      <Headroom>
        <div className="header-container">
          <div className="header-background">
            <a href="/">
            <h2 className="house-icon">Home</h2>
            </a>
            <a onClick={executeScroll}>
              <h2 className="contact-text">Contact</h2>
            </a>
          </div>
        </div>
      </Headroom>

      <video autoPlay muted loop className="myVideo" src={back} type="video/mp4" />


        <div class="grid">
        <figure class="effect-romeo">
          <img src={white} alt="img05"/>
          <figcaption>
            <h2>Web <br/> <span>Design</span></h2>
            <p>We build websites large and small with the latest and greatest tools available</p>
          </figcaption> 
        </figure>
        <figure class="effect-romeo">
        <img src={white} alt="img05"/>
          <figcaption>
            <h2>Search <span>Optimization</span></h2>
            <p>We do everything possible to make you the number one search result</p>
          </figcaption> 
          </figure>
          <figure class="effect-romeo">
          <img src={white} alt="img05"/>
          <figcaption>
            <h2>Facebook <span>Integration</span></h2>
            <p>From Facebook Advertizing to creating and managing social media content</p>
          </figcaption> 
          </figure>
      </div>              

      <div className="image-grid">

        <div className='row'>
        <ScrollAnimation animateIn='bounceInRight' animateOnce={true}>
          <img className="house-icon" src={z4881239_28446}/>
            <div className='burb-box'>
              <p className='about-me-header'>About me</p>
              <p className='about-me'>
              </p>
            </div>
          </ScrollAnimation>
          <div className='contact-section'>
            <ScrollAnimation animateIn='bounceInLeft' animateOnce={true}>
              <MyForm ref={this.myRef} />
            </ScrollAnimation>
          </div>
          <div className="spacer"/>
          <img className="facebook-icon" src={fb_icon}/>
          </div>
          <ScrollAnimation animateIn='fadeIn' animateOnce={true}>

            <InfiniteScroll
              className='div-34x'
              dataLength={apiResponse.length}
              next={this.loadMoreRows}
              hasMore={true}
              >
              {Object.values(apiResponse.slice(0, (page+1)*6)).map((value, index) => 
              <a target="_blank" rel="noopener noreferrer" href={value.post}>
                <Child
                  onMouseEnter={() => this.handleMouseEnter(index)}
                  onMouseLeave={() => this.handleMouseLeave(index)}
                  isHovering={isHovered[index]}
                  src={value.image}
                  comment={value.comment}
                />
              </a>)}
            </InfiniteScroll>
            </ScrollAnimation>
          </div>
        </div>
    )
  }
}
function Child({ onMouseEnter, onMouseLeave, src, comment, isHovering }) {
  return (
      <div className="imagex" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
        <HoverComp itemTitle={''} photoItemsProp={[src]}/>
        <div className="centered">
        {isHovering && comment}
        {isHovering && <img className='fb-image-icon' src={facebook_logo_white}/>}
        </div>
      </div>
  );
}

Answer 1

Решение

Вы можете достичь этого, не используя refs .

Сначала обновите функцию scrollToRef:

const scrollToElement = (target) => window.scrollTo(0, target.offsetTop);

Наконец, обновите вашу executeScroll функцию:

const executeScroll = (element) => scrollToElement(element.target)

Примечания:

• Вы указываете значение myRef для формы, <MyForm ref={this.myRef} />. Поэтому, когда вы выполните scrollToRef(this.myRef), ваш код будет прокручиваться до этой формы.

• , чтобы продолжить использование ссылок, вам нужно будет создать ссылку для каждого элемента, к которому вы хотите перейти. Например: this.contactRef = React.createRef(); this.homeRef = React.createRef(); etc ...

• , затем прикрепите эти ссылки к соответствующим элементам: <a id="contact-link" ref={this.contactRef}>

• , затем обновите функцию executeScroll, чтобы принять ссылка элемента const executeScroll = (ref) => {scrollToRef(ref)}

• и, наконец, вызовите функцию onclick следующим образом: onClick={() => executeScroll(this.contactRef)}

• перейдите к документам , чтобы узнать больше о реф и домене.

• console.log(), чтобы получить визуальную информацию о сбрасываемых данных, если вам лень разбираться с документацией.

Вот песочница , которая демонстрирует, как добиться прокрутки для использования ссылок и без.