在 React 应用程序中嵌入 Typeform答案

【问题标题】：Embed Typeform in React app在 React 应用程序中嵌入 Typeform
【发布时间】：2018-11-19 00:24:48
【问题描述】：

如何在我的 React 应用程序中嵌入 Typeform 表单？

Typeform 提供的嵌入代码无法在 JSX 中编译。

这是嵌入代码的示例：

<div class="typeform-widget" data-url="https://sample.typeform.com/to/32423" 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> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=ezQ2ub&utm_source=typeform.com-12183356-Basic&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

【问题讨论】：

标签： reactjs typeform

【解决方案1】：

如果您使用带有 react 的 Typescript 并且遇到此错误，只需确保在 tsconfig 文件中将 noImplicitAny 设置为 false： "noImplicitAny": false,

【讨论】：

【解决方案2】：

受到 Elise Chant 解决方案的启发，并使用基于函数的组件、钩子和 Typescript，这就是我为我的项目提出的。我不想在官方 SDK 之上安装另一个瘦包装器。

import * as typeformEmbed from '@typeform/embed';
import React, { useEffect, useRef } from 'react';

interface EmbeddedTypeformProps {
  link: string;
  hideFooter?: boolean;
  hideHeaders?: boolean;
  opacity?: number;
}

export const EmbeddedTypeform: React.FunctionComponent<EmbeddedTypeformProps> = ({
  link,
  hideFooter = true,
  hideHeaders = true,
  opacity = 90,
}) => {
  const elementRef = useRef(null);

  useEffect(() => {
    typeformEmbed.makeWidget(elementRef.current, link, {
      hideFooter,
      hideHeaders,
      opacity,
    });
  }, [link]);

  return (
    <div
      ref={elementRef}
      style={{ width: '100%', height: '100%', flex: '1 1 auto' }}
    />
  );
};

【讨论】：

【解决方案3】：

您可以使用我创建的 React 包装器组件：https://github.com/alexgarces/react-typeform-embed

它在底层使用了官方的 Typeform Embed SDK。基本上你必须传递你的表单 url，但它也支持其他 SDK 选项。

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" />;
  }
}

【讨论】：

我试过这个并得到错误：Could not find a declaration file for module 'react-typeform-embed'. 'xyz_path/node_modules/react-typeform-embed/lib/index.js' implicitly has an 'any' type.

【解决方案4】：

您可以查看用于嵌入 JavaScript here 的 Typeform 文档。

还有他们的官方 npm 模块here。

使用React refs 触发初始化，类似于初始化 jQuery 插件的方式。

import React from 'react';
import * as typeformEmbed from '@typeform/embed'

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.el = null;
  }
  componentDidMount() {
    if (this.el) {
      typeformEmbed.makeWidget(this.el, "https://sample.typeform.com/to/32423", {
        hideFooter: true,
        hideHeaders: true,
        opacity: 0
      });
    }
  }
  render() {
    return (
      <div ref={(el) => this.el = el} style={{width: '100%', height: '300px'}} />
    )
  }
}

export default Form;

【讨论】：