React 函数组件中使用 Input.TextArea 格式化并高亮显示 JSON 内容

React 函数组件中使用 Input.TextArea 格式化并高亮显示 JSON 内容

您可以使用第三方库 'react-json-view' 来实现此操作。首先，您需要安装它：

npm install react-json-view

然后，您可以在函数组件中导入它：

import React, { useState } from 'react';
import ReactJson from 'react-json-view';
import { Input } from 'antd';

const { TextArea } = Input;

const MyComponent = () => {
  const [json, setJson] = useState('');

  const handleJsonChange = e => {
    setJson(e.target.value);
  };

  return (
    <>
      <TextArea rows={10} value={json} onChange={handleJsonChange} />
      <ReactJson src={JSON.parse(json)} />
    </>
  );
};

在上面的代码中，我们使用 useState 来存储用户输入的 JSON 字符串，然后使用 ReactJson 组件来将其格式化并高亮显示。

注意：在将 JSON 字符串传递给 ReactJson 之前，我们使用 JSON.parse 将其转换为 JavaScript 对象。这是必要的，因为 ReactJson 只接受 JavaScript 对象作为输入。