将动态控件插入控件集合的中间

const controls = ['control1', 'control2', 'control3'];
const newControl = 'newControl';
const index = 1;
controls.splice(index, 0, newControl);

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      controls: ['control1', 'control2', 'control3']
    };
  }

  addControl = () => {
    const { controls } = this.state;
    const newControl = 'newControl';
    const index = 1;
    controls.splice(index, 0, newControl);
    this.setState({ controls });
  };

  render() {
    const { controls } = this.state;
    return (
      <div>
        {controls.map((control, index) => (
          <div key={index}>{control}</div>
        ))}
       <button onClick={this.addControl}>Add Control</button>
      </div>
    );
  }
}

export default App;

  <div>
    <div v-for="(control, index) in controls" :key="index">{{ control }}</div>
   <button @click="addControl">Add Control</button>
  </div>
</template><script>
export default {
  data() {
    return {
      controls: ['control1', 'control2', 'control3']
    };
  },
  methods: {
    addControl() {
      const newControl = 'newControl';
      const index = 1;
      this.controls.splice(index, 0, newControl);
    }
  }
};
</script>