[英]How to use scrollIntoView in React?
我試圖使用我的標題中的鏈接滾動到我的應用程序的不同部分與scrollIntoView。 標題是App的孩子。 我收到一個TypeError說我試圖保存id的變量是未定義的。 有人可以幫我確定我做錯了什么嗎? 我想我可能不得不使用ComponentDidMount,但我不知道該怎么做,如果這甚至是修復。 我將不得不用我的所有標題鏈接執行此操作。
//錯誤bundle.js:152未捕獲的TypeError:無法在atClick(bundle.js:19957)處的App.getScrollLocations(bundle.js:152)處讀取屬性'scrollIntoView'為null。在Object.ReactErrorUtils.invokeGuardedCallback(bundle.js: 4660)在executeDispatch(bundle.js:4460)的executeDispatch(bundle.js:4483),executeDispatchesAndRelease(bundle.js:3913),executeDispatchesAndReleaseTopLevel(bundle.js:3924),位於forEachAccumulated(bundle.forEach)的executeDispatchesAndReleaseTopLevel(bundle.js:3924) .js:4760)at Object.processEventQueue(bundle.js:4129)///////
//應用
class App extends Component {
constructor(props) {
super(props);
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
this.getScrollLocations = this.getScrollLocations.bind(this);
this.state = {
open: false,
projects: Service,
selectedProject: Service[0]
}
}
closeModal(event) {
this.setState({open: false});
}
openModal(project) {
this.setState({
open: true,
selectedProject: project
});
}
///////////// scroll function //////////////
getScrollLocations() {
const whatIDo = document.getElementById('.whatIdo');
console.log(whatIDo)
whatIDo.scrollIntoView();
}
render() {
const show = {
display: 'block'
};
const hide = {
display: 'none'
};
return (
<div>
<div style={this.state.open === false ? hide : show}>
<Modal
value={this.state.open}
closeModal={this.closeModal}
project={this.state.selectedProject}
/>
</div>
<Header
//////////// FUNCTION PASSED TO HEADER ///////////////
getScrollLocations={this.getScrollLocations}
/>
<Intro />
/////////////// ELEMENT I AM TARGETING /////////////////
<WhatIDo id="whatIDo" />
<WhoIAm />
<Gallery
value={this.state.open}
projects={this.state.projects}
openModal={this.openModal}
/>
<Contact />
<Footer />
</div>
);
}
}
//頭
const header = (props) => {
console.log(props);
return (
<div className="header">
<div className="header-name">
XXXXXXX XXXXXXX
</div>
<div className="header-links">
<ul>
<li>Intro</li>
<li
///////////// FUNCTION CALL ON CLICK /////////////////
onClick={() => props.getScrollLocations()}
>What I do</li>
<li>Who I am</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</div>
</div>
)
}
我使用以下模塊來實現這一點:
https://www.npmjs.com/package/scroll-into-view-if-needed
它可以像您期望的那樣使用頁內錨鏈接,並且可以與react-router一起使用而不會出現問題。
import React from 'react';
import PropTypes from 'prop-types';
import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
/*
SCROLL INTO VIEW
Purpose:
This modular component enables hash links
eg. (www.xyz.com/somepage#someID)
and plays nice with react router 4
Usage:
Wrap this component around a single div with an ID
Example:
<ScrollIntoView id={this.props.location.hash}>
<div id="someID">
... loads of content...
</div>
</ScrollIntoView>
<a href="/somepage#someID"> IN-PAGE ANCHOR </a>
*/
class ScrollIntoView extends React.Component {
componentDidMount() {
this.scroll();
}
componentDidUpdate() {
this.scroll();
}
scroll() {
const { id } = this.props;
//console.log('ID is: '+id);
if (!id) {
return;
}
const element = document.querySelector(id);
if (element) {
// this just jumps to the element
// see support:
//element.scrollIntoView({block: "end", behavior: "smooth"});
//If Firefox...
if (navigator.userAgent.indexOf("Firefox") > 0) {
//...use native smooth scrolling.
element.scrollIntoView({block: "end", behavior: "smooth"});
// If its any other browser, use custom polyfill...
}else{
//... luckily I have this handy polyfill...
scrollIntoViewIfNeeded(element, false, {
duration: 150
});
// (⌐■_■
}
}
}
render() {
return this.props.children;
}
}
ScrollIntoView.propTypes = {
id: PropTypes.string.isRequired,
children: PropTypes.oneOfType([
PropTypes.array.isRequired,
PropTypes.object.isRequired
])
};
export default ScrollIntoView;
以下是一個實際操作示例: https : //anthonycregan.co.uk/portfolio
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.