滚动到反应中的组件

Question

我有简单的反应状态组件，看起来像这样

class Homepage extends Component {   
    render () {    
        return (
            <div>
            <OpeningContent />
            <Content />
            <ContactUs />
            </div>
        ) 
     } 
}

export default Homepage;

现在，在我的标题中看起来像这样

const header = () => {

        return (
            <div>
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img src={NavImage} width="70" height="70" class="d-inline-block align-top" alt="" />
                 </a>

                <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon navbar-dark"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/printing">Printing </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ManpowerSupply">Manpower Supply</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us </a>
                    </li>
                    </ul>
                </div>
            </nav>
            </div>

        )
    }

当用户点击“联系我们”链接时

   <li class="nav-item">  <a class="nav-link" href="#">Contact Us </a> 

我希望它滚动到我的主页中的<ContactUs />组件，我该如何实现？

Answer 1

要使用常规HTML功能实现此行为 - 您可以向要滚动页面的元素添加一些id：

<div id="scrollPoint">
  ...
</div>

然后将id作为要控制滚动的特定链接的href属性的值传递：

<a class="nav-link" href="#scrollPoint">Contact Us </a>

你可以阅读更多关于HTML anchor element的信息。