在React中,可以使用ReactDOM的方法insertBefore來將一個組件插入到另一個組件的前面。以下是一個示例代碼:
import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const ref1 = useRef(null);
const ref2 = useRef(null);
useEffect(() => {
const parent = ref1.current.parentNode;
parent.insertBefore(ref2.current, ref1.current);
}, []);
return (
<div>
<div ref={ref1}>Component 1</div>
<div ref={ref2}>Component 2</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
在上面的示例中,我們使用useRef來創建兩個引用(ref1和ref2),并在useEffect鉤子中使用insertBefore方法將ref2插入到ref1的前面。最后,將App組件渲染到根元素中。