外部ソース (data.js) からレンダリングされたリンクを含むヘッダーが必要です。生成されたリンクをクリックすると、ドキュメントは同じ ID を持つ div (別のコンポーネント内) にスクロールします。リンクとしての名前。
render からヘルパー メソッドに名前を渡すと、約 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;
ここに私の他のコンポーネントがあります（各セクションには、最初にセクションと同じIDを持つdivがあり、前述のように、セクションを手動で入力すると、すべて正常に機能します.
class Contact extends React.Component {
render() {
return (
<ContactCon id="Contact"> // This is a styled.div
....
....
....
私を助けてください。ありがとう