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

Question

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

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> 以使其与网站主题保持一致？

Answer 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;

注意：根据您的 Typeform 版本，您可能需要使用 createPopop (^1.01) 而不是 makePopup。

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

复制相同的行为

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

Embed Typeform into React using Custom Button Component

javascript

reactjs

gatsby

tailwind-css

typeform