React.js页眉，当单击链接时滚动到页面的一部分吗？

Question

我想要一个标头，该标头具有从外部源（data.js）呈现的链接，然后在单击它生成的链接时，文档将滚动到ID为的div（在单独的组件中）与链接名称相同。

当我将名称从渲染器传递到helper方法时，只能使其向下滚动约2cm，然后停止。但是，当我制作一个单独的组件时，只有一个按钮可以滚动到某个部分，因此可以使用；或者，如果我在函数中手动键入该部分，它将滚动到正确的部分，但是当我从呈现的链接中将该部分传递给函数时，它将无法工作。我不知道我在做什么错。

这里是Data.js中的部分

export const sections = [`About`, `Contact`, `Tools`, `Projects`];

这是我的标头代码

import React from 'react';
// (Removed Styled Components Import Statements)    //
import { sections } from './Data';

class Header extends React.Component {
    renderSections() {
        return sections.map((section) => {
            let sect = section.toString();
            return (
                <HeadLi>
                    <HeadLink id={section} onClick={() => this.scrollToSection(sect)}>
                        {section}
                    </HeadLink>
                </HeadLi>
            );
        });
    }

    scrollToSection = (s) => {
        let elm;
        elm = document.getElementById(s);

如果我将其更改为

elm = document.getElementById('About);

可以正常工作，但不能与传入的值一起使用

        elm.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
            inline: 'nearest',
        });
    };

    render() {
        return (
            <HeadCon>
                <HeadImg src={icon} show="none" />
                <Name className="myName">John Lennon</Name>
                <Container>
                    <Branding>
                        <BrandH1>
                            <HighlightSpan>John Lennon</HighlightSpan> Singer
                        </BrandH1>
                    </Branding>
                    <HeadNav>
                        <UL>{this.renderSections()}</UL>
                    </HeadNav>
                </Container>
            </HeadCon>
        );
    }
}

export default Header;

这是我的另一个组件（每个部分的开头都有一个div，其id等于各部分，并且就像我说的，如果我手动键入该部分，那么一切正常。

class Contact extends React.Component {
    render() {
        return (
            <ContactCon id="Contact"> // This is a styled.div
....
....
....

请帮助我。谢谢

Answer 1

在HeadLink中，使用<a></a>属性带有href="#Contact"标签。