Javascript 如何在html对象上附加React组件？

我正在尝试实现拖放功能。 使用，

onDragOver

查找html对象并设置state this object（ex）div）

当我

ondrop

时，我想在状态之后附加一些React Component（ex）类按钮（extensed Component）

我发现

insertAdjecentHtml

或

replacetwith

。但当我使用它时，它像[对象]一样打印

---

那么有什么方法可以解决这个问题呢？

在这种情况下，如果满足基于组件状态的条件，则可以让渲染函数返回稍微不同的html

例如：

constructor() {
  this.state = {
    wasDragged: false;
  }
}
onDragStatusChange(){
  //what triggers this is up to you to determine.
  this.setState({
    wasDragged: true
  })
  // also consider setting it back to false under some condition
}
render() {
   <div>
   <p> heres the rest of our form!</p>
     {if(this.state.wasDragged) {
        <input type='button' value='click me' />
     }}
   </div>
   }
}

constructor（）{
此.state={
错误：错误；
}
}
onDragStatusChange（）{
//是什么触发了这一切，这取决于你自己。
这是我的国家({
是的
})
/还考虑在某些条件下将其设置为false。
}
render（）{
这是我们表格的其余部分

{if（this.state.wasdrable）{
}}
}
}