动态添加HTML元素

Question

当组件挂载时，我希望能够动态添加几个div元素。我尝试使用以下代码：

<div className="resumebuilder__structure" ref="panel_holder">
</div>

我的函数在生命周期钩子中被调用

getPanels = () => {
  return this.props
    .resumeTemplate
    .roughTemplateStructure
    .roughScale.map((roughS) => {
      const uid = uuid();
      this.updatePanelInTemplate(uid);
      const elem = <div ref={uid} className={roughS.class} ></div>;
      return elem;
    });
}

生命周期方法

componentDidMount() {
  this.refs.panel_holder.appendChild(this.getPanels());
}

但我遇到了以下错误

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

有人有任何想法吗？

---- 更新 --

虽然我尝试了其他方法，但仍然没有找到答案。如果您知道任何信息，请评论。

- Ladoo

Answer 1

更好的方法是将组件放在父组件的状态中的一个数组中。然后渲染该数组中的所有组件。

- Reda Meskali

---

你所说的“access”是什么意思？ - Reda Meskali

我将在用户点击时动态添加一些更多的div。 - Ladoo

是的，您将把您的组件添加到数组中，并使用setState()重新渲染。 - Reda Meskali

使用案例类似于：一开始，我将在正在尝试的 div 中添加一些分区，然后当用户将某些组件拖动到这些 div 上时，这些组件将作为特定 div 元素的子元素添加。 - Ladoo

我想我明白你的意思了。但那是另一种方法。问题是我们如何使用 ref？ - Ladoo