React 中从剪贴板复制 JSON 到 JSON 展示组件

要实现将剪贴板中的内容复制到 React 中的 JSON 展示组件（类似于 b-code-editor），可以按照以下步骤进行操作：

首先，确保已经安装了react-json-view和clipboard这两个库。可以使用以下命令进行安装：

npm install react-json-view clipboard

在 React 组件的文件中，导入所需的库：

import React, { useRef } from 'react';
import JSONView from 'react-json-view';
import Clipboard from 'clipboard';

创建一个 React 组件，并在组件中定义一个 ref 来引用 JSON 展示组件：

const MyComponent = () => {
  const jsonViewRef = useRef(null);

  // 处理粘贴事件
  const handlePaste = () => {
    const clipboardData = window.clipboardData || event.clipboardData;
    const pastedData = clipboardData.getData('Text');

    try {
      const parsedData = JSON.parse(pastedData);
      jsonViewRef.current.setState({ src: parsedData });
    } catch (error) {
      console.error('Invalid JSON data');
    }
  };

  return (
    <div>
      <button onClick={handlePaste}>粘贴</button>
      <JSONView ref={jsonViewRef} />
    </div>
  );
};

在组件中，使用Clipboard库来监听剪贴板的粘贴事件，并将粘贴的内容解析为 JSON 格式，并更新 JSON 展示组件的状态：

const MyComponent = () => {
  const jsonViewRef = useRef(null);

  // 处理粘贴事件
  const handlePaste = () => {
    const clipboard = new Clipboard('.paste-button');

    clipboard.on('success', (e) => {
      const pastedData = e.text;

      try {
        const parsedData = JSON.parse(pastedData);
        jsonViewRef.current.setState({ src: parsedData });
      } catch (error) {
        console.error('Invalid JSON data');
      }
    });

    clipboard.on('error', () => {
      console.error('Failed to access clipboard');
    });

    clipboard.onClick(event);
  };

  return (
    <div>
      <button className='paste-button' onClick={handlePaste}>粘贴</button>
      <JSONView ref={jsonViewRef} />
    </div>
  );
};

这样，当用户点击“粘贴”按钮时，剪贴板中的内容将被解析为 JSON 格式，并更新 JSON 展示组件的状态，从而展示出 JSON 数据。