反应滚动到组件 [英] react scroll to component

问题描述

我有 3 个组件，这是我的网站.加载每个组件 js 文件，并且所有 3 个组件都显示在一个页面上，如下所示:

顶部菜单第一节第二节

在 Topmenu 组件中，我只有一个菜单.我尝试在菜单字段(SectionOne)上设置 scrollToComponent onClick.但是我不知道如何让它在点击时滚动到 SectionOne?

我知道 this.sectionOne 是对内部引用的引用，对吗?但是如何将其指向sectionOne.js"文件中的 ref 呢?

我的 TopMenu.js 文件中有以下内容

 onClick={() =>scrollToComponent(this.sectionOne , { offset: 0, align: 'top', duration: 1500})}

解决方案

要将 ref 转发到组件内部的某个地方，可以使用 forwardRef.

这意味着我们在父组件中创建 ref 并将其传递给组件，组件将其向下传递给其中的 DOM 元素.

class App 扩展 React.Component {构造函数(道具){超级(道具)；this.section1 = React.createRef();this.section2 = React.createRef();this.scrollToContent = this.scrollToContent.bind(this);}滚动到内容(内容){开关(内容){情况1:this.section1.current.scrollIntoView({行为:'平滑'});休息;案例2:this.section2.current.scrollIntoView({行为:'平滑'});}}使成为() {返回 (<主要><Menu goTo={this.scrollToContent}/>
<Section1 ref={this.section1}/><Section2 ref={this.section2}/>
</main>);}}

然后，在Section1中，

const Section1 = React.forwardRef((props, ref)=>{返回 (
<p>第1部分</p></节>);});

您可以在此处

查看工作示例

我没有使用 scroll-to-component 包，但同样的事情也适用.

Forward Refs 现在仅在 React 16.3 中受支持，您可以使用 这种替代方法在较低版本中需要该功能.

I have 3 components which is my site. Each component js-file is loaded and all 3 shows on one page like this:

Topmenu SectionOne SectionTwo

In the Topmenu component I have a menu only. I’ve tried to setup the scrollToComponent onClick at a menu field (SectionOne). But I cannot figure out how to get it to scroll to SectionOne when clicked?

I know this.sectionOne is a ref to an internal ref, right? But how to direct it to a ref inside the "sectionOne.js" file?

I have the following inside my TopMenu.js file

     onClick={() => scrollToComponent(this.sectionOne , { offset: 0, align: 'top', duration: 1500})}

解决方案

To forward the ref to somewhere inside the component, you can use the logic of forwardRef.

This means that we create the ref in the parent component and pass the same to the component which passes it down to DOM element inside it.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.section1 = React.createRef();
    this.section2 = React.createRef();
    this.scrollToContent = this.scrollToContent.bind(this);
  }
  scrollToContent(content) {
    switch(content) {
      case 1:
        this.section1.current.scrollIntoView({behavior: 'smooth'});
        break;
      case 2:
        this.section2.current.scrollIntoView({behavior: 'smooth'});
    }
  }
  render() {
    return (
      <main>
        <Menu goTo={this.scrollToContent} />
        <div className='main'>
          <Section1 ref={this.section1} />
          <Section2 ref={this.section2} />
        </div>
      </main>
    );
  }
}

and then, inside Section1,

const Section1 = React.forwardRef((props, ref)=>{
  return (
    <section ref={ref} className='section'>
      <p>Section 1</p>
    </section>
  );
});

You can see a working sample here

I'm not using scroll-to-component package, but the same thing applies.

Forward Refs are supported only in React 16.3 now, you can use this alternative approach if you need the feature in lower versions.

这篇关于反应滚动到组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！