使用React滚动点击.owardRef不起作用

Question

我想知道如何使用Reactrefs导航到特定组件

function App() {
let CompetencesRef = React.createRef();
let ExperiencesRef = React.createRef();
let FormationRef = React.createRef();
let RecoRef = React.createRef();
let refs = { CompetencesRef, ExperiencesRef, FormationRef, RecoRef }
let scrollToRef = (reference) => {
console.log(reference)
reference.current.scrollIntoView({ behavior: 'smooth' })
}
return (
<ParallaxProvider>
<ThemeProvider theme={theme}>
<div className="App">
<div className="hero">
<HeaderApp refs={refs} scrollToRef={scrollToRef} />
<ApprochApp />
</div>
<Apropos />
<Competences ref={CompetencesRef} />
<Experiences ref={ExperiencesRef} />
<Formation ref={FormationRef} />
<Recom ref={RecoRef} />
<Contact />
<Footer />
</div >
</ThemeProvider>
</ParallaxProvider>
);
}
export default App;

AppHeader

const AppHeader = (props, refs, scrollToRef) => {
console.log(props)
return (
<div >
<Headroom>
<MenuApp refs={props.refs} scrollToRef={props.scrollToRef} />
</Headroom>
</div>
)
}
export default AppHeader

应用菜单

const MenuApp = (props, refs, scrollToRef) => {
console.log(props)
return (
<div className="menu sticky-inner grid-container">
<div className="desktop-menu">
<div className="menu-item a-propos" ref={props.refs.CompetencesRef} onClick={() => props.scrollToRef(props.refs.CompetencesRef)}>
<p className='button'>Compétences</p>
</div>
<div className="menu-item competences" ref={props.refs.ExperiencesRef} onClick={() => props.scrollToRef(props.refs.ExperiencesRef)} >
<p className='button'>Experiences </p>
</div>
<div className="menu-item experiences" ref={props.refs.FormationRef} onClick={() => props.scrollToRef(props.refs.FormationRef)}>
<p className='button'>Formation</p>
</div>
<div className="menu-item formation" ref={props.refs.RecoRef} onClick={() => props.scrollToRef(props.refs.RecoRef)}>
<p className='button'>Recomendations </p>
</div>
</div>
<p className="mobile-menu">
<MenuIcon />
</p>
<div className="github-ico">
<GitHubIcon />
</div>
<div className="linkedin-ico">
<LinkedInIcon />
</div>
<div className="contact">
<div className='contact-btn'>
<span className="contact-ico"> <MessageIcon /></span>  <span style={isBrowser ? { display: 'block' } : { display: 'none' }} > contact </span>
</div>
</div>
</div>
)
}
export default React.forwardRef(MenuApp) 

我在带有scrollIntoView的Apps.js中使用ClickHandler。但实际上当我点击视图时并没有滚动。

我不会使用像反作用滚动这样的包

Answer 1

这里有一个最小的可复制示例(没有所有代码噪声(：

function App() {
const competencesRef = React.useRef();
const refs = { competencesRef /* ExperiencesRef, FormationRef, RecoRef */ };
const scrollToRef = (reference) => {
reference.current.scrollIntoView({ behavior: "smooth" });
};
return (
<>
<AppHeader refs={refs} scrollToRef={scrollToRef} />
<Competences ref={competencesRef} />
</>
);
}
const Competences = React.forwardRef((props, ref) => {
return <div ref={ref}>...</div>;
});
const AppHeader = (props) => {
return <MenuApp refs={props.refs} scrollToRef={props.scrollToRef} />;
};
const MenuApp = (props) => {
return (
<div
ref={props.refs.competencesRef}
onClick={() => props.scrollToRef(props.refs.competencesRef)}
>
<p className="button">Compétences</p>
</div>
);
};

代码的问题是，您使用React.createRef而不是React.useRef(您可以搜索差异(，并且您只需要React.forwardRef用于使用ref道具(如Competences(的组件。

Answer 2

您的代码中有两个问题：

首先，函数组件和类组件使用ref是有区别的。在功能组件上使用ref会产生意外的结果，因为它们没有实例。

应将forwardRef用于所有截面构件，并确保将ref放置在包装元素上。

第二个问题是，您正在使用两个组件的refs。Ref应该只分配给一个组件(可能不是在所有情况下(。在这种情况下，您需要对部分组件的引用来保持HTML元素。

因此，删除AppMenu组件中的ref道具：

<div className="menu-item a-propos" onClick={() => props.scrollToRef(props.refs.CompetencesRef)}>
<p className='button'>Compétences</p>
</div>

虽然它可以与裁判一起使用，但你可能正在考虑一个更简单的设置。例如，使用id。

如果您确实想继续使用refs，我还建议您不要将refs对象传递给子组件。实际上，您不希望子组件"；知道"；关于树中较高的组件。

例如，您可以通过处理应用程序组件中的onClick回调来缓解这种情况。

Answer 3

在scrollToRef函数中尝试此操作：

window.scrollTo(0, reference.current.offsetTop);