如何将 ref 传递给类函数答案

【问题标题】：How to pass a ref into a class function如何将 ref 传递给类函数
【发布时间】：2020-07-13 20:16:19
【问题描述】：

我正在制作一个单页网站，我想使用 refs 来告诉代码在单击按钮时滚动到哪里。这些按钮应滚动到网站的特定部分。我正在使用此代码滚动到窗口中的特定 div 引用。具体来说，我调用 scrollToRef() 滚动到 homeRef div。无论如何我可以将 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>
  );
  }

  
}

【问题讨论】：

标签： reactjs web scroll react-ref

【解决方案1】：

像这样？

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

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

【讨论】：

【解决方案2】：

您可以简单地使用 HTML 来代替 JavaScript：

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

<div className="home-page-background" id="home">

【讨论】：