当我单击React JS中的一个按钮时，有没有办法访问DIV并在其中进行另一个DIV？

Question

我正在尝试模仿香草JS中主要使用的内容，即 document.createelement（...）
我一直在尝试与Webrtc和Kurento合作，这使我进入了这个永无止境的混乱循环。我正在尝试遵循他们的文档，该文档属于纯JavaScript，以备多对多用例，但我必须在React中实现它。

https://doc-kurento.readthedocs.io/en/stable/tutorials/java/tutorial-groupcall.html

任何帮助都会很好。 我什

至尝试复制和粘贴代码并将其作为最后的手段将其连接起来，但这使情况变得更糟。

编辑 -

意思是在参与者中说的。

function Participant(name) {
this.name = name;
var container = document.createElement('div');
container.className = isPresentMainParticipant() ? 
PARTICIPANT_CLASS : PARTICIPANT_MAIN_CLASS;
container.id = name;
var span = document.createElement('span');
var video = document.createElement('video');
var rtcPeer;

container.appendChild(video);
container.appendChild(span);
container.onclick = switchContainerClass;
document.getElementById('participants').appendChild(container);

span.appendChild(document.createTextNode(name));

我很抱歉没有之前提供足够的详细信息，我的 我将把文件链接到具有JS文件和index.html

https://github.com/kurento/kurento/kurento-tutorial-java/tree/master/master/kurento-group-cloup-call/src/src/main/resources /静态

因此，在此特定功能中，他们使用 - var container = document.createelement（'div'）;

它在HTML文件中创建DIV内部的DIV

<div id="room" style="display: none;">
            <h2 id="room-header"></h2>
             <div id="participants">
               (Creates a div here and video is rendered here)
             </div>
            <input type="button" id="button-leave" 
                onmouseup="leaveRoom();"
                value="Leave room">
        </div>

-conferenceroom.js中调用了

var participant = new Participant(name);

github的第105行，在“现有参与者”功能下的第105行。

简而言之，

我只想知道，在单击React中的按钮时，在单击一个按钮时，使用不同的类名称或标签名等添加新的Divs的更好方法是什么。

我找不到使用Kurento P.S在React JS中进行项目的任何人进行的项目

- 我对Stackoverflow非常新，我也在学习问问题，对此表示抱歉，为头痛感到抱歉:(

Answer 1

如果要在孩子内部创建相同的父组件，则可以使用递归调用。

function InnerDiv ({count=5}) {
  return (
    <div>
      <h5>This is a component</h5>
    {count>0?<InnerDiv count={count-1} />: null }
    </div>)
}

然后，当您将此组件添加到另一个组件（例如应用程序）中时，只需传递计数。

export default function App() {
  return (
    <div className="App">
      <InnerDiv count={4} />
    </div>
  );
}