在reactjs中获取具有突出显示文本和标签的选定文本

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  // 其他组件代码...

  return (
    <div>
      {/* 渲染文本内容 */}
      <p>这是一段文本内容。</p>

      {/* 渲染选定文本 */}
      <p>选定的文本：{selectedText}</p>
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  const handleMouseUp = () => {
    const selection = window.getSelection();
    setSelectedText(selection.toString());
  };

  return (
    <div>
      {/* 渲染文本内容 */}
      <p onMouseUp={handleMouseUp}>这是一段文本内容。</p>

      {/* 渲染选定文本 */}
      <p>选定的文本：{selectedText}</p>
    </div>
  );
}

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  const handleMouseUp = () => {
    const selection = window.getSelection();
    setSelectedText(selection.toString());
  };

  return (
    <div>
      {/* 渲染文本内容 */}
      <p onMouseUp={handleMouseUp}>
        这是一段文本内容。选定的文本：<span className="highlight">{selectedText}</span>
      </p>
    </div>
  );
}