滚动到react

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

要使用常规的key | value D DDDDDDD E EEEEEEE 功能来实现此行为-您可以向要向其滚动页面的元素添加一些const-key-name：

HTML

，然后将该id作为要控制滚动的特定链接的<div id="scrollPoint"> ... </div> 属性的值传递：

id

您可以了解有关HTML anchor element的更多信息。