Question

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

TopMenu中 SectionOne SectionTwo

在Topmenu组件中，我只有一个菜单。我试图在菜单字段（SectionOne）上设置scrollToComponent onClick。但我无法弄清楚如何在点击时滚动到SectionOne？

我知道this.sectionOne是内部参考的参考，对吧？但是如何将它引导到“sectionOne.js”文件中的引用？

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

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

Answer 1

要将ref转发到组件内的某个位置，您可以使用forwardRef的逻辑。

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

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

然后，在Section1内，

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

您可以看到工作样本here

我没有使用scroll-to-component包，但同样适用。

仅在React 16.3中支持转发参考，如果您需要较低版本的功能，则可以使用this alternative approach。

反应滚动到组件

1 个答案: