类型“JSX.IntrinsicElements”上不存在属性“stripe-pricing-table”

Question

我正在按照 Stripe 文档在链接处嵌入定价表，但遇到此错误：“类型‘JSX.IntrinsicElements’上不存在属性‘stripe-pricing-table’”。

这是我的代码：

import React from 'react';

export default function PricingTable() {
  return (
    <stripe-pricing-table
      pricing-table-id="prctbl_xxxxx"
      publishable-key="pk_test_xxxxx"
    ></stripe-pricing-table>
  );
}

我将不胜感激任何帮助。

Answer 1

我认为这更多是一个 Typescript 问题，你可能必须声明一个stripe-pricing-table类型

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'stripe-pricing-table': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

Answer 2

有点晚了，但如果你使用 React 和 Typescript，我就是这样做的。

import React, { useEffect } from "react";

const StripePricingTable = () => {
    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://js.stripe.com/v3/pricing-table.js";
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return React.createElement("stripe-pricing-table", {
        "pricing-table-id": {PRICING TABLE ID GOES HERE},
        "publishable-key": {PUBLISHABLE KEY GOES HERE},
    });
};

export default StripePricingTable;