在react中以递归方式呈现元素内的元素

import React from 'react';

const RecursiveComponent = ({ elements }) => {
  return (
    <ul>
      {elements.map((element, index) => (
        <li key={index}>
          {element.name}
          {element.children && (
            <RecursiveComponent elements={element.children} />
          )}
        </li>
      ))}
    </ul>
  );
};

export default RecursiveComponent;

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

const elements = [
  {
    name: 'Element 1',
    children: [
      {
        name: 'Element 1.1',
        children: [
          {
            name: 'Element 1.1.1',
            children: []
          },
          {
            name: 'Element 1.1.2',
            children: []
          }
        ]
      },
      {
        name: 'Element 1.2',
        children: []
      }
    ]
  },
  {
    name: 'Element 2',
    children: []
  }
];

const App = () => {
  return (
    <div>
      <h1>Recursive Component Example</h1>
      <RecursiveComponent elements={elements} />
    </div>
  );
};

export default App;