如何在React中动态添加一些现有元素之间的新元素？

import React, { Component } from 'react';

class DynamicElements extends Component {
  constructor(props) {
    super(props);
    this.state = {
      elements: ['Element 1', 'Element 2'], // 初始的现有元素
    };
  }

  componentDidMount() {
    // 监听添加新元素的事件，例如点击按钮
    document.getElementById('addButton').addEventListener('click', this.addNewElement);
  }

  addNewElement = () => {
    // 在现有元素之间添加新元素
    const { elements } = this.state;
    const newElement = 'New Element';
    const updatedElements = [...elements, newElement];
    this.setState({ elements: updatedElements });
  }

  render() {
    const { elements } = this.state;

    return (
      <div>
        <button id="addButton">添加新元素</button>
        {elements.map((element, index) => (
          <div key={index}>{element}</div>
        ))}
      </div>
    );
  }
}

export default DynamicElements;