将typeform分配给iframe

Question

我用reactJS编写了一个代码编辑器，并且正在尝试编写Typeform代码，以便在iframe中看到输出。如果我在render()、componentDidUpdate()、shouldComponentUpdate()或任何其他帮助函数中将该值赋给iframe，则iframe的内容不会出现。

但是如果我刷新页面并在componentDidMount()中分配来自我的数据库的值，iframe的内容就会出现，并向我显示预期的结果。

我的要求是在任何帮助函数中为iframe赋值，但是这样做iframe的内容不会出现，在本例中我得到的是白屏。除了Typeform代码之外，所有其他类型的代码都工作得很好，并在iframe中提供了所需的结果。

你知道我如何克服这个问题吗？

我的Typeform代码是：

<div class="typeform-widget" data-url="https://form.typeform.com/to/gWfKQXJg" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

Answer 1

您是否正在尝试在React应用程序中嵌入typeform？如果是这样，您可以使用react-typeform-embed package

在你的项目中就像这样使用它

import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';

class App extends React.Component {
  render() {
    return <ReactTypeformEmbed url="https://demo.typeform.com/to/njdbt5" />;
  }
}