Question

我有一个带有几个嵌套组件的React组件。对于页面导航，我在顶部有几个按钮。问题是，如果在单击某个按钮时将页面滚动到嵌套的react组件，是否可以在不使用jquery库的情况下执行此操作？

  render() {
    return (
      <div>
        <button onClick={(e) => { console.log('Scrolling to Item 1');}}>Button0</button>
        <button onClick={(e) => { console.log('Scrolling to Item 2');}}>Button1</button>
          <Layout>
            <Item>
              <Content>
            ...
              </Content>
            </Item>

            <Item>
              <Content>
            ...
              </Content>
            </Item>

          </Layout>
        }
      </div>
    );
  }

Answer 1

使用scrollIntoView向下滚动到元素和React的refs以获取组件的DOM。

Here是一个小例子，说明了您想要做的事情。

var Hello = React.createClass({
  componentDidMount() {
   alert("I will scroll now");

   this.refs.hello.scrollIntoView(); // scroll...
  },

  render: function() {
    return <div ref="hello">Hello {this.props.name}</div>; // reference your component
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 2

您是否尝试过使用锚点？

将id属性（＆＃39; myTarget＆＃39;）添加到目标组件，并用链接替换该按钮（href：＆＃39; #mytarget＆＃39;）。

不幸的是，这不适用于固定标题。

Answer 3

除非您需要自己实施，否则可以使用react-scroll

他们的demo几乎就是你所需要的。

Answer 4

如果您使用打字稿。

import * as React from 'react';

class Hello extends React.Component<{}> {
  private helloRef = React.createRef<HTMLDivElement>();

  public render() {
    return (
      <div ref={this.helloRef}>Hello</div>
      <button onClick={() => { 
            if (this.helloRef && this.helloRef.current) {
              this.helloRef.current.scrollIntoView();
            } 
          }
      }>Button1</button>
    );
  }
}

Answer 5

您可以使用react-scroll npm install react-scroll --save

有关信息，请访问此页面 https://www.npmjs.com/package/react-scroll

Answer 6

使用 useRef 创建引用
```
const trackButton = useRef();
```

使用 scrollIntoView 方法滚动到特定的元素/组件

    trackButton.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })

单击按钮滚动页面到嵌套的React组件

6 个答案: