0

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

当我将渲染中的名称传递给辅助方法时，我只能让它向下滚动大约 2 厘米，然后它就停止了。但是，当我制作一个只有一个按钮可以滚动到某个部分的单独组件时，它可以工作；或者，如果我手动将部分输入到函数中，它将滚动到正确的部分，但是当我将部分从呈现的链接传递到函数中时，它不起作用。我不知道我做错了什么。

这是来自 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
....
....
....

请帮我。谢谢

4

1 回答 1

0

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

于 2020-05-12T10:31:57.340 回答