动态创建MaterialUI组件

Question

我目前正在开发Web应用程序，我的任务之一是创建一个“文档生成器”，用户可以在其中使用提供的信息动态创建MaterialUI组件。

对于按钮之类的简单组件（如下所示），我可以提供直接的HTML结构，并仅使用用户提供的信息创建一个新元素。我通过检查MaterialUI提供的button元素并将HTML结构重构为模板字符串来发现这一点。但是对于更复杂的结构，例如扩展面板或手风琴，我不确定如何解决此问题。

currentItemTitle = prompt("Enter a button title: ");
const item = document.createElement("div");

item.innerHTML = 
`<button class="MuiButtonBase-root MuiButton-root 
MuiButton-text MuiButton-textPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">${currentItemTitle}</span>
    <span class="MuiTouchRipple-root"></span>
</button>`;

const documentBody = document.getElementById("document-body")
documentBody.appendChild(item)

提供的代码示例使按钮以MaterialUI样式和用户输入的标题显示在文档上，这正是我所期望的。我现在的问题是试图使扩展面板之类的东西以相同的方式呈现，但HTML结构要复杂得多。在这种情况下，用户可以提供扩展面板标题以及其中的内容。我觉得我当前的解决方案不够灵活，也没有足够的可扩展性。有人对我可以采取什么方法有建议吗？