要實現前端選區，可以使用React中的useRef和useState來處理選區的狀態，并使用window.getSelection()方法來獲取選區信息。
首先，在組件中定義一個用于存儲選區的ref和一個用于存儲選區狀態的state：
import React, { useState, useRef } from 'react';
function App() {
const [selection, setSelection] = useState(null);
const textRef = useRef(null);
// 處理選區變化的函數
const handleSelectionChange = () => {
const selectedText = window.getSelection().toString();
setSelection(selectedText);
};
return (
<div>
<div ref={textRef} onMouseUp={handleSelectionChange}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<p>選中的文本：{selection}</p>
</div>
);
}
export default App;
然后，在div元素上添加一個onMouseUp事件處理函數，該函數會在鼠標松開時觸發。在函數中，我們使用window.getSelection().toString()來獲取選中的文本，并將其設置為選區狀態。
最后，在頁面上渲染選中的文本，即可實現前端選區功能。
