如何在React中渲染基于JSON的HTML元素？

import React from 'react';

const JSONRenderer = ({ json }) => {
  const renderElement = (element) => {
    switch (element.type) {
      case 'text':
        return <span>{element.content}</span>;
      case 'heading':
        return <h1>{element.content}</h1>;
      case 'paragraph':
        return <p>{element.content}</p>;
      case 'link':
        return <a href={element.url}>{element.content}</a>;
      // 添加更多元素类型的处理逻辑
      default:
        return null;
    }
  };

  const renderElements = () => {
    return json.map((element, index) => (
      <div key={index}>{renderElement(element)}</div>
    ));
  };

  return <div>{renderElements()}</div>;
};

export default JSONRenderer;

import React from 'react';
import JSONRenderer from './JSONRenderer';

const App = () => {
  const json = [
    { type: 'heading', content: 'Hello, World!' },
    { type: 'paragraph', content: 'This is a paragraph.' },
    { type: 'link', content: 'Click me', url: 'https://example.com' },
  ];

  return <JSONRenderer json={json} />;
};

export default App;