反应“ appendChild”将节点追加到BELOW div而不是内部吗？

Question

我需要在我的React应用程序中嵌入一个Calendly应用程序。我有一个div，我想将其嵌入其中，因为我想给Calendly应用程序一个width和height，我打算通过设置{{1 }} 标签;否则，它会显得非常小，并带有滚动条。

为了运行Java脚本嵌入Calendly应用程序，我必须创建节点并将其附加到DOM。在执行此操作时，您似乎可以在目标屏幕div的下方 下添加它们（如您在此屏幕截图中看到的那样，为清楚起见，我将其标记为：）

我试图为本文编写一个CodeSandbox，但是它在这里正常工作：https://codesandbox.io/s/react-example-df8ns。为什么这可以在CodeSandbox上运行，但不能在本地运行？

编辑：

我想澄清我对Junius评论的回应。实际上，有一种方法可以让我嵌入Calendly，而无需直接修改DOM（请参见下文）。但是，使用该方法似乎阻止了我传递“预填充”参数。如果可以传递该参数，我会很乐意使用该方法，但是我还没有弄清楚该怎么做。

div

Answer 1

通过查看输出，我能够弄清楚如何将查询字符串参数传递给URL：

.
.
.
render(){
    const data_url = `https://calendly.com/username?name=${this.props.firstName}%20${this.props.lastName}&email=${this.props.email}`
    return (
        <div class="calendly-inline-widget" data-url={data_url} style={{"min-width":"320px","height":"780px"}} />
    );
}