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在视窗的距离
这样子就能够做出平顺的滑行至指定的区块