如何解决单击链接时，React Use ref滚动到特定组件
我想知道如何使用React @{
ViewBag.Title = "Home Page";
}
<link rel="stylesheet" href="~/Content/bootstrap-reboot.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link rel="stylesheet" href="~/Content/style.css">
<div class="container-fluid container-xl">
<div class="wrapper">
<!--Sidebar-->
<div id="sidebar-wrapper">
<nav id="sidebar" class="col-md-4 col-lg-3 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
@*SIDEBAR TOGGLE BUTTON*@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
@*EXPAND-COLLAPSE ACCORDION*@
<div class="accordion" id="accordion">
<div class="card bg-transparent">
<div class="card-header" id="headingOne">
<h2 class="mb-0 text-center">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
OPTIONS
</button>
</h2>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<ul class="nav flex-column">
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label text-dark" for="customCheck1">option1</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label text-dark" for="customCheck2">option2</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label text-dark" for="customCheck3">option3</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label text-dark" for="customCheck4">option4</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label class="custom-control-label text-dark" for="customCheck5">option5</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6">
<label class="custom-control-label text-dark" for="customCheck6">option6</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7">
<label class="custom-control-label text-dark" for="customCheck7">option7</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck8">
<label class="custom-control-label text-dark" for="customCheck8">option8</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck9">
<label class="custom-control-label text-dark" for="customCheck9">option9</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@*END OF FIRST CARD*@
<div class="accordion" id="accordion">
@*SECOND CARD*@
<div class="card bg-transparent">
<div class="card-header" id="headingTwo">
<h2 class="mb-0 text-center">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
MORE OPTIONS
</button>
</h2>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<ul class="nav flex-column">
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck10">
<label class="custom-control-label text-dark" for="customCheck10">option10</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck11">
<label class="custom-control-label text-dark" for="customCheck11">option11</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck12">
<label class="custom-control-label text-dark" for="customCheck12">option12</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck13">
<label class="custom-control-label text-dark" for="customCheck13">option13</label>
</div>
</li>
<li class="nav-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck14">
<label class="custom-control-label text-dark" for="customCheck14">option14</label>
</div>
</li>
</ul>
</div>
</div>
</div>
@*END OF SECOND CARD*@
</div>
</nav>
<!--End of Sidebar-->
</div>
<div id="page=content-wrapper">
<div class="col">
<div class="jumbotron jumbotron-fluid" style="background-color: #a5ccf6">
<div class="container-fluid container-lg">
<h1>Headline</h1>
<p class="lead">Add your own entries.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>HEADLINE1</h2>
<p>
ASP.NET MVC gives you a powerful,patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable,agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>HEADLINE2</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add,remove,and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>HEADLINE3</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks a lot.
Coby
导航到特定组件
refsAppHeader
function App() {
const CompetencesRef = React.useRef();
const ExperiencesRef = React.useRef();
const FormationRef = React.useRef();
const RecoRef = React.useRef();
return (
<ParallaxProvider>
<ThemeProvider theme={theme}>
<div className="App">
<div className="hero">
<HeaderApp />
<ApprochApp />
</div>
<Apropos />
<Competences parentRef={CompetencesRef} />
<Experiences parentRef={ExperiencesRef} />
<Formation parentRef={FormationRef} />
<Recom parentRef={RecoRef} />
<Contact />
<Footer />
</div >
</ThemeProvider>
</ParallaxProvider>
);
}
AppMenu
const AppHeader = () => {
return (
<div >
<Headroom>
<MenuApp />
</Headroom>
</div>
)
}
export default AppHeader
我知道我应该在父组件上声明ref，但是我在如何将引用传递给菜单应用程序以及如何在其与组件之间建立链接方面有个困惑。
实际上，我不会使用react-scroll
之类的软件包解决方法
我认为您需要forwarding-refs
在父母中
const RecoRef = React.useRef();
....
<ChildComponent ref={RecoRef} />
在子组件中
//export the component with React.forwardRefs
const ChildComponent = (props,ref) => {
return (
<div ref={ref}>
.....
</div>
)
}
export default React.forwardRefs(ChildComponent)
需要两件事：ref和scrollIntoView。
该片段是在组件之间共享引用的简化版本，滚动到该div的标题中有redDiv和button；我在顶部父元素中创建了ref，然后将它作为道具传递给标头和要滚动到的组件；标题中有一个按钮，该按钮在scrollIntoView上调用ref方法，因此浏览器会将元素滚动到视图中。
const AppHeader = (props) => {
return (
<div className="menu sticky-inner grid-container">
my logo
<button onClick={()=> props.iconMenuRefs[0].current.scrollIntoView({behavior: "smooth"})}
> scroll to red div </button>
<button onClick={()=> props.iconMenuRefs[1].current.scrollIntoView({behavior: "smooth"})}
> scroll to blue div </button>
</div>
)
}
function App() {
const redDivRef = React.useRef();
const blueDivRef = React.useRef();
return (
<div>
<AppHeader iconMenuRefs={[redDivRef,blueDivRef]}/>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<SimpleComp ref={redDivRef} color="red"/>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<SimpleComp ref={blueDivRef} color="blue"/>
</div>
);
}
const SimpleComp = React.forwardRef((props,ref) => {
return <div style={{backgroundColor: props.color}} ref={ref}>scroll to me!</div>
})
ReactDOM.render( <App />,myApp )<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id="myApp"></div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
