React-使用useRef跨组件操作DOM

"我想要在React上实现同一页在menu上点击，就滑到对应的区块，该怎麽做呢?"
在React上面因为不建议直接操作DOM的关系
所以在能取得DOM资讯的状况下
建议是使用ref

在这边我的组件又拆分成

firstpage
|
|--nav
|--sec1
|--sec2
|--sec3
|--sec4
|--sec5

我的menu是放在nav上
但ref都分散在sec1~sec5的最顶层div
那我该怎麽取得ref呢?

首先得在父层firstpage先指定useRef给sec1~sec5

const sec1Ref=useRef();
const sec2Ref=useRef();
const sec3Ref=useRef();
const sec4Ref=useRef();
const sec5Ref=useRef();

并把secRef1~5撒到组件内

<Sec1 s1={sec1Ref}/>
<Sec2 s2={sec2Ref}/>
<Sec3 s3={sec3Ref}/>
<Sec4 s4={sec4Ref}/>
<Sec5 s5={sec5Ref}/>

接着在子层sec1~sec5接受props
以sec1代表

const ref1=props.s1; 
<div className='sec1' ref={ref1}></div>

在这边子层sec1~5就设定完毕
接着回到父层firstpage设定要传入nav的值

<Nav all={{sec1Ref,sec2Ref,sec3Ref,sec4Ref,sec5Ref}}/>

做到此处的话
在父层的设定也完毕了
最後只剩下子层nav的部分

nav的部分因为有5颗按钮
每一颗都要顺顺的对应到sec1~5
於是在每颗按钮的li都设定一个onClick函数
以要滑至sec1为例

<li onClick={handleScrollSec1}>sec1</li>

接着定义函数handleScrollSec1

const handleScrollSec1=()=>{
  const scrollRef1=props.all.sec1Ref.current.offsetTop;
  window.scrollTo({top:scrollRef1,behavior:'smooth'});
}

在这边的scrollRef1为接受父组件传下来的props
并且请记得要给ref一个current
而因为scrollTo这边的top内需要给数字
所以才在最後面加了一个offsetTop定义div在视窗的距离
这样子就能够做出平顺的滑行至指定的区块