javascript - 动态添加到 html 元素

Question

我想在安装组件时动态添加一些 div 元素。我尝试使用以下代码

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

在生命周期钩子(Hook)中调用的我的函数

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'.

有人知道吗？

----更新--

虽然我继续用其他方法，但仍然没有找到答案。如果您有任何了解，请发表评论。

Answer 1

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