javascript - 屬性 'stripe-pricing-table' 在類型 'JSX.IntrinsicElements' 上不存在

我正在按照 Stripe 文檔在連結中嵌入定價表，但遇到此錯誤：「屬性 'stripe-pricing-table' 在類型 'JSX.IntrinsicElements' 上不存在。」

這是我的程式碼：

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>
  );
}

我會感激任何幫助。

答案＃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>;
    }
  }
}

答案＃2

有點晚，但如果你在使用帶有 Typescript 的 React，這是我做到的方法。

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;