使用自定义按钮组件将 Typeform 嵌入 React

Posted 2023-03-06

【中文标题】使用自定义按钮组件将 Typeform 嵌入 React

【英文标题】：Embed Typeform into React using Custom Button Component

【发布时间】：2021-02-21 03:51:03

【问题描述】：

我正在尝试在我的 Gatsby React 网站中嵌入一个 Typeform 联系表单。我见过的所有示例都使用基本的 html button 作为示例，但这与我网站的主题背道而驰。这是我用来嵌入 typeform 的代码示例：

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

class ContactInfo extends Component 
  componentDidMount() 
    const popup1 = typeformEmbed.makePopup('URL', 
      mode: 'drawer_right',
      autoclose: 3000,
      hideHeaders: true,
      onSubmit: function () 
        console.log('Typeform successfully submitted');
      
    );

    document.getElementById('bt-popup').addEventListener('click', function () 
      popup1.open();
    );
  
  render() 
    return (
      <div>
        <button id="bt-popup" class="my-button">
          Popup
        </button>
      </div>
    );
  


export default ContactInfo;

但是，我在这里创建了自己的按钮组件，我想使用它来代替示例中的按钮组件。代码如下：

import React from 'react';
import PropTypes from 'prop-types';

import * as Styled from './styles';

const Button = ( primary, block, children ) => (
  <Styled.Button primary=primary block=block whileHover= scale: 1.05  whileTap= scale: 0.95 >
    children
  </Styled.Button>
);

Button.propTypes = 
  primary: PropTypes.bool,
  block: PropTypes.bool,
  children: PropTypes.any.isRequired
;

export default Button;

如何将<button> 替换为我自己的组件<Button> 以使其与网站主题保持一致？

【参考方案1】：

你的意思是？

import React,  Component  from 'react';
import * as typeformEmbed from '@typeform/embed';
import Button from 'path/to/button/component'

class ContactInfo extends Component 
  componentDidMount() 
    const popup1 = typeformEmbed.makePopup('URL', 
      mode: 'drawer_right',
      autoclose: 3000,
      hideHeaders: true,
      onSubmit: function () 
        console.log('Typeform successfully submitted');
      
    );

    document.getElementById('bt-popup').addEventListener('click', function () 
      popup1.open();
    );
  
  render() 
    return (
      <div>
        <Button id="bt-popup" class="my-button">
          Popup
        </Button>
      </div>
    );
  


export default ContactInfo;

注意：您可能需要使用 createPopop (^1.01) 而不是 makePopup，具体取决于您的 Typeform 版本。

请记住，就最佳实践而言，直接访问 DOM（就像您使用 document.getElementById 一样）并不是最佳方法，因为它会对性能产生巨大影响（例如 jQuery）。事实上，这就是你使用 React 的原因，它创建了一个虚拟 DOM。您可以使用 useRef hook 复制相同的行为。

【讨论】：

嗨 Ferran，实际上当我尝试这个时 - 按钮组件出来了，但是一旦你点击它，typeform 就不会弹出......

所以我得到：当我使用 Button 而不是 button 时，TypeError: Cannot read property 'addEventListener' of null

没关系！我想我已经解决了。非常感谢费兰！

仅供参考：makePopup 在 @typeform/embed1.01 的较新版本中被 createPopup 替换。