Javascript 创建并复制一段代码，按下按钮Jsx react

如果有一个心地善良的人能帮我解决这个问题，我会很高兴的。 我只想添加一个按钮，一旦我们点击它，一个新的：

G1

将被创建，提前感谢。 这是我的密码：

import {Multiselect} from 'multiselect-react-dropdown';

 function addGroup(){
     var x = document.getElementById("mySelect");
   var Multiselect = document.createElement("Multiselect");
   Multiselect.appendChild = <Multiselect/>;
   x.add(Multiselect);
  }
function Dropdown(){
    const data = [
      {student: '1' , id: 1},
      {student: '2' , id: 2},
      {student: '3' , id: 3}
    ]
  const [options] = useState(data);
return (
    <row>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary" onClick={addGroup()}>Add Group</button> 
       <div id="mySelect"> <h3>G1</h3>
        <Multiselect options={options} displayValue="student" /></div>
        
        
       
    </div>
    </row>
    
);
}
export default Dropdown; 

从'Multiselect react dropdown'导入{Multiselect}；
函数addGroup（）{
var x=document.getElementById（“mySelect”）；
var Multiselect=document.createElement（“Multiselect”）；
Multiselect.appendChild=；
x、 添加（多选）；
}
函数下拉列表（）{
常数数据=[
{学生：'1'，id:1}，
{学生：'2'，id:2}，
{学生：'3'，id:3}
]
常量[选项]=使用状态（数据）；
返回(
添加组
G1
);
}
导出默认下拉列表；

使用状态跟踪下拉列表的计数

将状态更新程序连接到按钮

onClick

当用户按下按钮时，增加

下拉列表

从“React”导入React；
导出默认函数App（）{
常量[dropdownCount，setDropdownCount]=React.useState（0）；
返回(
{Array.from（{length:dropdownCount}）.map（（v，idx）=>{
报税表（
下拉列表{idx+1}

)
})}
setDropdownCount（dropdownCount+1）}>
增加下拉列表
);
}

注意：-React中的直接DOM操作是一种反模式。尽量远离它

使用状态跟踪下拉列表的计数

将状态更新程序连接到按钮

onClick

当用户按下按钮时，增加

下拉列表

从“React”导入React；
导出默认函数App（）{
常量[dropdownCount，setDropdownCount]=React.useState（0）；
返回(
{Array.from（{length:dropdownCount}）.map（（v，idx）=>{
报税表（
下拉列表{idx+1}

)
})}
setDropdownCount（dropdownCount+1）}>
增加下拉列表
);
}

---

注意：-React中的直接DOM操作是一种反模式。试着远离它。

明白了：“注意：-React中的直接DOM操作是一种反模式。试着远离它。”你能详细说明一下该怎么做吗？我只想复制React使用它自己的DOM表示形式，称为虚拟DOM，以便弄清楚要渲染什么。通常，虚拟DOM将匹配当前的DOM结构，React将处理道具和状态的更改，更新虚拟DOM，然后将必要的更改发送到真实DOM。如果您直接更新您的DOM，那么可以想象虚拟DOM和真实DOM之间会存在差异，从而导致React中的混乱并导致不必要的bug。不管怎样，你有没有试过上面的代码，并看到它在工作。我不知道如何实现它…我正在尝试解决它…我实现了你给我的代码，但这段代码只是为了隐藏和显示下拉列表。。。我的问题是不同的…我想按下按钮，一个新的多选将被创建。。。所以基本上这是“G1”…每次都有人按下你想要的按钮@Rik不管怎样，我已经更新了代码。你可以检查一下这是否是你的用例。明白了：“注意：-React中的直接DOM操作是一种反模式。试着远离它。”你能详细说明一下该怎么做吗？我只想复制React使用它自己的DOM表示形式，称为虚拟DOM，以便弄清楚要呈现什么。通常，虚拟DOM将匹配当前的DOM结构，React将处理道具和状态的更改，更新虚拟DOM，然后将必要的更改发送到真实DOM。如果您直接更新您的DOM，那么可以想象虚拟DOM和真实DOM之间会存在差异，从而导致React中的混乱并导致不必要的bug。不管怎样，你有没有试过上面的代码，并看到它在工作。我不知道如何实现它…我正在尝试解决它…我实现了你给我的代码，但这段代码只是为了隐藏和显示下拉列表。。。我的问题是不同的…我想按下按钮，一个新的多选将被创建。。。所以基本上这是“G1”…每次都有人按下你想要的按钮@Rik不管怎样，我已经更新了代码。您可以检查这是否是您的用例。

import React from 'react';

export default function App() {
  const [dropdownCount, setDropdownCount] = React.useState(0);

  return (
    <div>
      {Array.from({ length: dropdownCount }).map((v, idx) => {
        return ( 
          <div>
            <p>Dropdown {idx + 1}</p>
            <MultiDropdown />
          </div>
        )
      })}
      <button onClick={() => setDropdownCount(dropdownCount + 1)}>
          Increase dropdown
      </button>
    </div>
  );
}