Как передать ссылку в функцию класса - PullRequest
Новая
       13

Как передать ссылку в функцию класса

0 голосов
/ 13 июля 2020

Я создаю одностраничный веб-сайт и хочу использовать ссылки, чтобы указать коду, где прокручивать при нажатии кнопки. Эти кнопки должны прокручиваться к определенной c части веб-сайта. Я использую этот код для прокрутки до указанного c div ref в окне. В частности, я вызываю scrollToRef(), чтобы перейти к div homeRef. Есть ли способ передать параметр ref в scrollToRef(), чтобы я мог указать, к какому ref прокручивать? 

class App extends Component {
    constructor(props) {
    super(props);
    this.aboutRef = React.createRef();
    this.demoRef = React.createRef();
    this.homeRef = React.createRef();
  }


  scrollToRef = () => window.scrollTo(0, this.homeRef.current.offsetTop);   

  render() {
    return (
    <div className="home-page">
      <header className="home-page-header">
        <div className="home-page-logo">
          <img src={logo} alt="company logo" width="200vh" height="40" />
        </div>
        <ul className="home-page-links">
          <li><button onClick={this.scrollToRef}>Home</button></li>
          <li><button >About</button></li>
          <li><button >Demo</button></li>
          <li><button>Contact</button></li>
        </ul>
      </header>

      <div className="home-page-background" ref={this.homeRef}>
        <section className="website-links">
          <div>
            <button >Home</button>
          </div>
          <div>
            <button >Demo</button>
          </div>
        </section>
      </div>

      <div className="about" ref={this.aboutRef}>
        <ul>
          <li className="orange">
            <div>
              <h1>Lorem ipsum</h1>
              <h3>lorem ipsum lorem ipsum lorem ipsum</h3>
            </div>
            <div>
              <img src={blank} />
            </div>
          </li>
          <li className="blue">
            <div>
              <img src={blank} />
            </div>
            <div>
              <h1>Lorem ipsum</h1>
              <h3>lorem ipsum lorem ipsum lorem ipsum</h3>
            </div>
          </li>
          <li className="orange">
            <div>
              <h1>Lorem ipsum</h1>
              <h3>lorem ipsum lorem ipsum lorem ipsum</h3>
            </div>
            <div>
              <img src={blank} />
            </div>
          </li>
          <li className="blue">
            <div>
              <img src={blank} />
            </div>
            <div>
              <h1>Lorem ipsum</h1>
              <h3>lorem ipsum lorem ipsum lorem ipsum</h3>
            </div>
          </li>
        </ul>
      </div>

      <div className="virtual-demo" ref={this.demoRef}>
        <h1>Demo</h1>
          <figure>
            <img src={blank} />
            <figcaption>Testing image</figcaption>
          </figure>
          
      </div>

    </div>
  );
  }

  
}

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Вы можете просто использовать HTML вместо JavaScript: 

<li><a href="#home">Home</a></li>

<div className="home-page-background" id="home">
0 голосов
/ 13 июля 2020

Как это? 

scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);  

<li><button onClick={() => this.scrollToRef(this.homeRef)}>Home</button></li>
...