从material ui映射html元素并通过map进行渲染的最佳方法

import React from 'react';
import { Typography, Button } from '@material-ui/core';

const elements = [
  { type: 'heading', text: 'Hello World' },
  { type: 'button', text: 'Click Me' },
];

const renderedElements = elements.map((element, index) => {
  if (element.type === 'heading') {
    return <Typography variant="h1" key={index}>{element.text}</Typography>;
  } else if (element.type === 'button') {
    return <Button variant="contained" color="primary" key={index}>{element.text}</Button>;
  } else {
    return null;
  }
});

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {renderedElements}
      </div>
    );
  }
}